<!doctype html><html lang="en">
 <head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <title>Layout Instability API</title>
  <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
<style data-fill-with="stylesheet">/******************************************************************************
 *                   Style sheet for the W3C specifications                   *
 *
 * Special classes handled by this style sheet include:
 *
 * Indices
 *   - .toc for the Table of Contents (<ol class="toc">)
 *     + <span class="secno"> for the section numbers
 *   - #toc for the Table of Contents (<nav id="toc">)
 *   - ul.index for Indices (<a href="#ref">term</a><span>, in §N.M</span>)
 *   - table.index for Index Tables (e.g. for properties or elements)
 *
 * Structural Markup
 *   - table.data for general data tables
 *     -> use 'scope' attribute, <colgroup>, <thead>, and <tbody> for best results !
 *     -> use <table class='complex data'> for extra-complex tables
 *     -> use <td class='long'> for paragraph-length cell content
 *     -> use <td class='pre'> when manual line breaks/indentation would help readability
 *   - dl.switch for switch statements
 *   - ol.algorithm for algorithms (helps to visualize nesting)
 *   - .figure and .caption (HTML4) and figure and figcaption (HTML5)
 *     -> .sidefigure for right-floated figures
 *   - ins/del
 *
 * Code
 *   - pre and code
 *
 * Special Sections
 *   - .note       for informative notes             (div, p, span, aside, details)
 *   - .example    for informative examples          (div, p, pre, span)
 *   - .issue      for issues                        (div, p, span)
 *   - .assertion  for assertions                    (div, p, span)
 *   - .advisement for loud normative statements     (div, p, strong)
 *   - .annoying-warning for spec obsoletion notices (div, aside, details)
 *
 * Definition Boxes
 *   - pre.def   for WebIDL definitions
 *   - table.def for tables that define other entities (e.g. CSS properties)
 *   - dl.def    for definition lists that define other entitles (e.g. HTML elements)
 *
 * Numbering
 *   - .secno for section numbers in .toc and headings (<span class='secno'>3.2</span>)
 *   - .marker for source-inserted example/figure/issue numbers (<span class='marker'>Issue 4</span>)
 *   - ::before styled for CSS-generated issue/example/figure numbers:
 *     -> Documents wishing to use this only need to add
 *        figcaption::before,
 *        .caption::before { content: "Figure "  counter(figure) " ";  }
 *        .example::before { content: "Example " counter(example) " "; }
 *        .issue::before   { content: "Issue "   counter(issue) " ";   }
 *
 * Header Stuff (ignore, just don't conflict with these classes)
 *   - .head for the header
 *   - .copyright for the copyright
 *
 * Miscellaneous
 *   - .overlarge for things that should be as wide as possible, even if
 *     that overflows the body text area. This can be used on an item or
 *     on its container, depending on the effect desired.
 *     Note that this styling basically doesn't help at all when printing,
 *     since A4 paper isn't much wider than the max-width here.
 *     It's better to design things to fit into a narrower measure if possible.
 *   - js-added ToC jump links (see fixup.js)
 *
 ******************************************************************************/

/******************************************************************************/
/*                                   Body                                     */
/******************************************************************************/

	body {
		counter-reset: example figure issue;

		/* Layout */
		max-width: 50em;               /* limit line length to 50em for readability   */
		margin: 0 auto;                /* center text within page                     */
		padding: 1.6em 1.5em 2em 50px; /* assume 16px font size for downlevel clients */
		padding: 1.6em 1.5em 2em calc(26px + 1.5em); /* leave space for status flag     */

		/* Typography */
		line-height: 1.5;
		font-family: sans-serif;
		widows: 2;
		orphans: 2;
		word-wrap: break-word;
		overflow-wrap: break-word;
		hyphens: auto;

		/* Colors */
		color: black;
		background: white top left fixed no-repeat;
		background-size: 25px auto;
	}


/******************************************************************************/
/*                         Front Matter & Navigation                          */
/******************************************************************************/

/** Header ********************************************************************/

	div.head { margin-bottom: 1em }
	div.head hr { border-style: solid; }

	div.head h1 {
		font-weight: bold;
		margin: 0 0 .1em;
		font-size: 220%;
	}

	div.head h2 { margin-bottom: 1.5em;}

/** W3C Logo ******************************************************************/

	.head .logo {
		float: right;
		margin: 0.4rem 0 0.2rem .4rem;
	}

	.head img[src*="logos/W3C"] {
		display: block;
		border: solid #1a5e9a;
		border-width: .65rem .7rem .6rem;
		border-radius: .4rem;
		background: #1a5e9a;
		color: white;
		font-weight: bold;
	}

	.head a:hover > img[src*="logos/W3C"],
	.head a:focus > img[src*="logos/W3C"] {
		opacity: .8;
	}

	.head a:active > img[src*="logos/W3C"] {
		background: #c00;
		border-color: #c00;
	}

	/* see also additional rules in Link Styling section */

/** Copyright *****************************************************************/

	p.copyright,
	p.copyright small { font-size: small }

/** Back to Top / ToC Toggle **************************************************/

	@media print {
		#toc-nav {
			display: none;
		}
	}
	@media not print {
		#toc-nav {
			position: fixed;
			z-index: 2;
			bottom: 0; left: 0;
			margin: 0;
			min-width: 1.33em;
			border-top-right-radius: 2rem;
			box-shadow: 0 0 2px;
			font-size: 1.5em;
			color: black;
		}
		#toc-nav > a {
			display: block;
			white-space: nowrap;

			height: 1.33em;
			padding: .1em 0.3em;
			margin: 0;

			background: white;
			box-shadow: 0 0 2px;
			border: none;
			border-top-right-radius: 1.33em;
			background: white;
		}
		#toc-nav > #toc-jump {
			padding-bottom: 2em;
			margin-bottom: -1.9em;
		}

		#toc-nav > a:hover,
		#toc-nav > a:focus {
			background: #f8f8f8;
		}
		#toc-nav > a:not(:hover):not(:focus) {
			color: #707070;
		}

		/* statusbar gets in the way on keyboard focus; remove once browsers fix */
		#toc-nav > a[href="#toc"]:not(:hover):focus:last-child {
			padding-bottom: 1.5rem;
		}

		#toc-nav:not(:hover) > a:not(:focus) > span + span {
			/* Ideally this uses :focus-within on #toc-nav */
			display: none;
		}
		#toc-nav > a > span + span {
			padding-right: 0.2em;
		}

		#toc-toggle-inline {
			vertical-align: 0.05em;
			font-size: 80%;
			color: gray;
			color: hsla(203,20%,40%,.7);
			border-style: none;
			background: transparent;
			position: relative;
		}
		#toc-toggle-inline:hover:not(:active),
		#toc-toggle-inline:focus:not(:active) {
			text-shadow: 1px 1px silver;
			top: -1px;
			left: -1px;
		}

		#toc-nav :active {
			color: #C00;
		}
	}

/** ToC Sidebar ***************************************************************/

	/* Floating sidebar */
	@media screen {
		body.toc-sidebar #toc {
			position: fixed;
			top: 0; bottom: 0;
			left: 0;
			width: 23.5em;
			max-width: 80%;
			max-width: calc(100% - 2em - 26px);
			overflow: auto;
			padding: 0 1em;
			padding-left: 42px;
			padding-left: calc(1em + 26px);
			background: inherit;
			background-color: #f7f8f9;
			z-index: 1;
			box-shadow: -.1em 0 .25em rgba(0,0,0,.1) inset;
		}
		body.toc-sidebar #toc h2 {
			margin-top: .8rem;
			font-variant: small-caps;
			font-variant: all-small-caps;
			text-transform: lowercase;
			font-weight: bold;
			color: gray;
			color: hsla(203,20%,40%,.7);
		}
		body.toc-sidebar #toc-jump:not(:focus) {
			width: 0;
			height: 0;
			padding: 0;
			position: absolute;
			overflow: hidden;
		}
	}
	/* Hide main scroller when only the ToC is visible anyway */
	@media screen and (max-width: 28em) {
		body.toc-sidebar {
			overflow: hidden;
		}
	}

	/* Sidebar with its own space */
	@media screen and (min-width: 78em) {
		body:not(.toc-inline) #toc {
			position: fixed;
			top: 0; bottom: 0;
			left: 0;
			width: 23.5em;
			overflow: auto;
			padding: 0 1em;
			padding-left: 42px;
			padding-left: calc(1em + 26px);
			background: inherit;
			background-color: #f7f8f9;
			z-index: 1;
			box-shadow: -.1em 0 .25em rgba(0,0,0,.1) inset;
		}
		body:not(.toc-inline) #toc h2 {
			margin-top: .8rem;
			font-variant: small-caps;
			font-variant: all-small-caps;
			text-transform: lowercase;
			font-weight: bold;
			color: gray;
			color: hsla(203,20%,40%,.7);
		}

		body:not(.toc-inline) {
			padding-left: 29em;
		}
		/* See also Overflow section at the bottom */

		body:not(.toc-inline) #toc-jump:not(:focus) {
			width: 0;
			height: 0;
			padding: 0;
			position: absolute;
			overflow: hidden;
		}
	}
	@media screen and (min-width: 90em) {
		body:not(.toc-inline) {
			margin: 0 4em;
		}
	}

/******************************************************************************/
/*                                Sectioning                                  */
/******************************************************************************/

/** Headings ******************************************************************/

	h1, h2, h3, h4, h5, h6, dt {
		page-break-after: avoid;
		page-break-inside: avoid;
		font: 100% sans-serif;   /* Reset all font styling to clear out UA styles */
		font-family: inherit;    /* Inherit the font family. */
		line-height: 1.2;        /* Keep wrapped headings compact */
		hyphens: manual;         /* Hyphenated headings look weird */
	}

	h2, h3, h4, h5, h6 {
		margin-top: 3rem;
	}

	h1, h2, h3 {
		color: #005A9C;
		background: transparent;
	}

	h1 { font-size: 170%; }
	h2 { font-size: 140%; }
	h3 { font-size: 120%; }
	h4 { font-weight: bold; }
	h5 { font-style: italic; }
	h6 { font-variant: small-caps; }
	dt { font-weight: bold; }

/** Subheadings ***************************************************************/

	h1 + h2,
	#subtitle {
		/* #subtitle is a subtitle in an H2 under the H1 */
		margin-top: 0;
	}
	h2 + h3,
	h3 + h4,
	h4 + h5,
	h5 + h6 {
		margin-top: 1.2em; /* = 1 x line-height */
	}

/** Section divider ***********************************************************/

	:not(.head) > hr {
		font-size: 1.5em;
		text-align: center;
		margin: 1em auto;
		height: auto;
		border: transparent solid 0;
		background: transparent;
	}
	:not(.head) > hr::before {
		content: "\2727\2003\2003\2727\2003\2003\2727";
	}

/******************************************************************************/
/*                            Paragraphs and Lists                            */
/******************************************************************************/

	p {
		margin: 1em 0;
	}

	dd > p:first-child,
	li > p:first-child {
		margin-top: 0;
	}

	ul, ol {
		margin-left: 0;
		padding-left: 2em;
	}

	li {
		margin: 0.25em 0 0.5em;
		padding: 0;
	}

	dl dd {
		margin: 0 0 .5em 2em;
	}

	.head dd + dd { /* compact for header */
		margin-top: -.5em;
	}

	/* Style for algorithms */
	ol.algorithm ol:not(.algorithm),
	.algorithm > ol ol:not(.algorithm) {
	 border-left: 0.5em solid #DEF;
	}

	/* Put nice boxes around each algorithm. */
	[data-algorithm]:not(.heading) {
	  padding: .5em;
	  border: thin solid #ddd; border-radius: .5em;
	  margin: .5em calc(-0.5em - 1px);
	}
	[data-algorithm]:not(.heading) > :first-child {
	  margin-top: 0;
	}
	[data-algorithm]:not(.heading) > :last-child {
	  margin-bottom: 0;
	}

	/* Style for switch/case <dl>s */
	dl.switch > dd > ol.only,
	dl.switch > dd > .only > ol {
	 margin-left: 0;
	}
	dl.switch > dd > ol.algorithm,
	dl.switch > dd > .algorithm > ol {
	 margin-left: -2em;
	}
	dl.switch {
	 padding-left: 2em;
	}
	dl.switch > dt {
	 text-indent: -1.5em;
	 margin-top: 1em;
	}
	dl.switch > dt + dt {
	 margin-top: 0;
	}
	dl.switch > dt::before {
	 content: '\21AA';
	 padding: 0 0.5em 0 0;
	 display: inline-block;
	 width: 1em;
	 text-align: right;
	 line-height: 0.5em;
	}

/** Terminology Markup ********************************************************/


/******************************************************************************/
/*                                 Inline Markup                              */
/******************************************************************************/

/** Terminology Markup ********************************************************/
	dfn   { /* Defining instance */
		font-weight: bolder;
	}
	a > i { /* Instance of term */
		font-style: normal;
	}
	dt dfn code, code.idl {
		font-size: medium;
	}
	dfn var {
		font-style: normal;
	}

/** Change Marking ************************************************************/

	del { color: red;  text-decoration: line-through; }
	ins { color: #080; text-decoration: underline;    }

/** Miscellaneous improvements to inline formatting ***************************/

	sup {
		vertical-align: super;
		font-size: 80%
	}

/******************************************************************************/
/*                                    Code                                    */
/******************************************************************************/

/** General monospace/pre rules ***********************************************/

	pre, code, samp {
		font-family: Menlo, Consolas, "DejaVu Sans Mono", Monaco, monospace;
		font-size: .9em;
		page-break-inside: avoid;
		hyphens: none;
		text-transform: none;
	}
	pre code,
	code code {
		font-size: 100%;
	}

	pre {
		margin-top: 1em;
		margin-bottom: 1em;
		overflow: auto;
	}

/** Inline Code fragments *****************************************************/

  /* Do something nice. */

/******************************************************************************/
/*                                    Links                                   */
/******************************************************************************/

/** General Hyperlinks ********************************************************/

	/* We hyperlink a lot, so make it less intrusive */
	a[href] {
		color: #034575;
		text-decoration: none;
		border-bottom: 1px solid #707070;
		/* Need a bit of extending for it to look okay */
		padding: 0 1px 0;
		margin: 0 -1px 0;
	}
	a:visited {
		border-bottom-color: #BBB;
	}

	/* Use distinguishing colors when user is interacting with the link */
	a[href]:focus,
	a[href]:hover {
		background: #f8f8f8;
		background: rgba(75%, 75%, 75%, .25);
		border-bottom-width: 3px;
		margin-bottom: -2px;
	}
	a[href]:active {
		color: #C00;
		border-color: #C00;
	}

	/* Backout above styling for W3C logo */
	.head .logo,
	.head .logo a {
		border: none;
		text-decoration: none;
		background: transparent;
	}

/******************************************************************************/
/*                                    Images                                  */
/******************************************************************************/

	img {
		border-style: none;
	}

	/* For autogen numbers, add
	   .caption::before, figcaption::before { content: "Figure " counter(figure) ". "; }
	*/

	figure, .figure, .sidefigure {
		page-break-inside: avoid;
		text-align: center;
		margin: 2.5em 0;
	}
	.figure img,    .sidefigure img,    figure img,
	.figure object, .sidefigure object, figure object {
		max-width: 100%;
		margin: auto;
	}
	.figure pre, .sidefigure pre, figure pre {
		text-align: left;
		display: table;
		margin: 1em auto;
	}
	.figure table, figure table {
		margin: auto;
	}
	@media screen and (min-width: 20em) {
		.sidefigure {
			float: right;
			width: 50%;
			margin: 0 0 0.5em 0.5em
		}
	}
	.caption, figcaption, caption {
		font-style: italic;
		font-size: 90%;
	}
	.caption::before, figcaption::before, figcaption > .marker {
		font-weight: bold;
	}
	.caption, figcaption {
		counter-increment: figure;
	}

	/* DL list is indented 2em, but figure inside it is not */
	dd > .figure, dd > figure { margin-left: -2em }

/******************************************************************************/
/*                             Colored Boxes                                  */
/******************************************************************************/

	.issue, .note, .example, .assertion, .advisement, blockquote {
		padding: .5em;
		border: .5em;
		border-left-style: solid;
		page-break-inside: avoid;
	}
	span.issue, span.note {
		padding: .1em .5em .15em;
		border-right-style: solid;
	}

	.issue,
	.note,
	.example,
	.advisement,
	.assertion,
	blockquote {
		margin: 1em auto;
	}
	.note  > p:first-child,
	.issue > p:first-child,
	blockquote > :first-child {
		margin-top: 0;
	}
	blockquote > :last-child {
		margin-bottom: 0;
	}

/** Blockquotes ***************************************************************/

	blockquote {
		border-color: silver;
	}

/** Open issue ****************************************************************/

	.issue {
		border-color: #E05252;
		background: #FBE9E9;
		counter-increment: issue;
		overflow: auto;
	}
	.issue::before, .issue > .marker {
		text-transform: uppercase;
		color: #AE1E1E;
		padding-right: 1em;
		text-transform: uppercase;
	}
	/* Add .issue::before { content: "Issue " counter(issue) " "; } for autogen numbers,
	   or use class="marker" to mark up the issue number in source. */

/** Example *******************************************************************/

	.example {
		border-color: #E0CB52;
		background: #FCFAEE;
		counter-increment: example;
		overflow: auto;
		clear: both;
	}
	.example::before, .example > .marker {
		text-transform: uppercase;
		color: #827017;
		min-width: 7.5em;
		display: block;
	}
	/* Add .example::before { content: "Example " counter(example) " "; } for autogen numbers,
	   or use class="marker" to mark up the example number in source. */

/** Non-normative Note ********************************************************/

	.note {
		border-color: #52E052;
		background: #E9FBE9;
		overflow: auto;
	}

	.note::before, .note > .marker,
	details.note > summary::before,
	details.note > summary > .marker {
		text-transform: uppercase;
		display: block;
		color: hsl(120, 70%, 30%);
	}
	/* Add .note::before { content: "Note"; } for autogen label,
	   or use class="marker" to mark up the label in source. */

	details.note > summary {
		display: block;
		color: hsl(120, 70%, 30%);
	}
	details.note[open] > summary {
		border-bottom: 1px silver solid;
	}

/** Assertion Box *************************************************************/
	/*  for assertions in algorithms */

	.assertion {
		border-color: #AAA;
		background: #EEE;
	}

/** Advisement Box ************************************************************/
	/*  for attention-grabbing normative statements */

	.advisement {
		border-color: orange;
		border-style: none solid;
		background: #FFEECC;
	}
	strong.advisement {
		display: block;
		text-align: center;
	}
	.advisement > .marker {
		color: #B35F00;
	}

/** Spec Obsoletion Notice ****************************************************/
	/* obnoxious obsoletion notice for older/abandoned specs. */

	details {
		display: block;
	}
	summary {
		font-weight: bolder;
	}

	.annoying-warning:not(details),
	details.annoying-warning:not([open]) > summary,
	details.annoying-warning[open] {
		background: #fdd;
		color: red;
		font-weight: bold;
		padding: .75em 1em;
		border: thick red;
		border-style: solid;
		border-radius: 1em;
	}
	.annoying-warning :last-child {
		margin-bottom: 0;
	}

@media not print {
	details.annoying-warning[open] {
		position: fixed;
		left: 1em;
		right: 1em;
		bottom: 1em;
		z-index: 1000;
	}
}

	details.annoying-warning:not([open]) > summary {
		text-align: center;
	}

/** Entity Definition Boxes ***************************************************/

	.def {
		padding: .5em 1em;
		background: #DEF;
		margin: 1.2em 0;
		border-left: 0.5em solid #8CCBF2;
	}

/******************************************************************************/
/*                                    Tables                                  */
/******************************************************************************/

	th, td {
		text-align: left;
		text-align: start;
	}

/** Property/Descriptor Definition Tables *************************************/

	table.def {
		/* inherits .def box styling, see above */
		width: 100%;
		border-spacing: 0;
	}

	table.def td,
	table.def th {
		padding: 0.5em;
		vertical-align: baseline;
		border-bottom: 1px solid #bbd7e9;
	}

	table.def > tbody > tr:last-child th,
	table.def > tbody > tr:last-child td {
		border-bottom: 0;
	}

	table.def th {
		font-style: italic;
		font-weight: normal;
		padding-left: 1em;
		width: 3em;
	}

	/* For when values are extra-complex and need formatting for readability */
	table td.pre {
		white-space: pre-wrap;
	}

	/* A footnote at the bottom of a def table */
	table.def           td.footnote {
		padding-top: 0.6em;
	}
	table.def           td.footnote::before {
		content: " ";
		display: block;
		height: 0.6em;
		width: 4em;
		border-top: thin solid;
	}

/** Data tables (and properly marked-up index tables) *************************/
	/*
		 <table class="data"> highlights structural relationships in a table
		 when correct markup is used (e.g. thead/tbody, th vs. td, scope attribute)

		 Use class="complex data" for particularly complicated tables --
		 (This will draw more lines: busier, but clearer.)

		 Use class="long" on table cells with paragraph-like contents
		 (This will adjust text alignment accordingly.)
		 Alternately use class="longlastcol" on tables, to have the last column assume "long".
	*/

	table {
		word-wrap: normal;
		overflow-wrap: normal;
		hyphens: manual;
	}

	table.data,
	table.index {
		margin: 1em auto;
		border-collapse: collapse;
		border: hidden;
		width: 100%;
	}
	table.data caption,
	table.index caption {
		max-width: 50em;
		margin: 0 auto 1em;
	}

	table.data td,  table.data th,
	table.index td, table.index th {
		padding: 0.5em 1em;
		border-width: 1px;
		border-color: silver;
		border-top-style: solid;
	}

	table.data thead td:empty {
		padding: 0;
		border: 0;
	}

	table.data  thead,
	table.index thead,
	table.data  tbody,
	table.index tbody {
		border-bottom: 2px solid;
	}

	table.data colgroup,
	table.index colgroup {
		border-left: 2px solid;
	}

	table.data  tbody th:first-child,
	table.index tbody th:first-child  {
		border-right: 2px solid;
		border-top: 1px solid silver;
		padding-right: 1em;
	}

	table.data th[colspan],
	table.data td[colspan] {
		text-align: center;
	}

	table.complex.data th,
	table.complex.data td {
		border: 1px solid silver;
		text-align: center;
	}

	table.data.longlastcol td:last-child,
	table.data td.long {
	 vertical-align: baseline;
	 text-align: left;
	}

	table.data img {
		vertical-align: middle;
	}


/*
Alternate table alignment rules

	table.data,
	table.index {
		text-align: center;
	}

	table.data  thead th[scope="row"],
	table.index thead th[scope="row"] {
		text-align: right;
	}

	table.data  tbody th:first-child,
	table.index tbody th:first-child  {
		text-align: right;
	}

Possible extra rowspan handling

	table.data  tbody th[rowspan]:not([rowspan='1']),
	table.index tbody th[rowspan]:not([rowspan='1']),
	table.data  tbody td[rowspan]:not([rowspan='1']),
	table.index tbody td[rowspan]:not([rowspan='1']) {
		border-left: 1px solid silver;
	}

	table.data  tbody th[rowspan]:first-child,
	table.index tbody th[rowspan]:first-child,
	table.data  tbody td[rowspan]:first-child,
	table.index tbody td[rowspan]:first-child{
		border-left: 0;
		border-right: 1px solid silver;
	}
*/

/******************************************************************************/
/*                                  Indices                                   */
/******************************************************************************/


/** Table of Contents *********************************************************/

	.toc a {
		/* More spacing; use padding to make it part of the click target. */
		padding-top: 0.1rem;
		/* Larger, more consistently-sized click target */
		display: block;
		/* Reverse color scheme */
		color: black;
		border-color: #3980B5;
		border-bottom-width: 3px !important;
		margin-bottom: 0px !important;
	}
	.toc a:visited {
		border-color: #054572;
	}
	.toc a:not(:focus):not(:hover) {
		/* Allow colors to cascade through from link styling */
		border-bottom-color: transparent;
	}

	.toc, .toc ol, .toc ul, .toc li {
		list-style: none; /* Numbers must be inlined into source */
		/* because generated content isn't search/selectable and markers can't do multilevel yet */
		margin:  0;
		padding: 0;
		line-height: 1.1rem; /* consistent spacing */
	}

	/* ToC not indented until third level, but font style & margins show hierarchy */
	.toc > li             { font-weight: bold;   }
	.toc > li li          { font-weight: normal; }
	.toc > li li li       { font-size:   95%;    }
	.toc > li li li li    { font-size:   90%;    }
	.toc > li li li li .secno { font-size: 85%; }
	.toc > li li li li li { font-size:   85%;    }
	.toc > li li li li li .secno { font-size: 100%; }

	/* @supports not (display:grid) { */
		.toc > li             { margin: 1.5rem 0;    }
		.toc > li li          { margin: 0.3rem 0;    }
		.toc > li li li       { margin-left: 2rem;   }

		/* Section numbers in a column of their own */
		.toc .secno {
			float: left;
			width: 4rem;
			white-space: nowrap;
		}

		.toc li {
			clear: both;
		}

		:not(li) > .toc              { margin-left:  5rem; }
		.toc .secno                  { margin-left: -5rem; }
		.toc > li li li .secno       { margin-left: -7rem; }
		.toc > li li li li .secno    { margin-left: -9rem; }
		.toc > li li li li li .secno { margin-left: -11rem; }

		/* Tighten up indentation in narrow ToCs */
		@media (max-width: 30em) {
			:not(li) > .toc              { margin-left:  4rem; }
			.toc .secno                  { margin-left: -4rem; }
			.toc > li li li              { margin-left:  1rem; }
			.toc > li li li .secno       { margin-left: -5rem; }
			.toc > li li li li .secno    { margin-left: -6rem; }
			.toc > li li li li li .secno { margin-left: -7rem; }
		}
	/* } */

	@supports (display:grid) and (display:contents) {
		/* Use #toc over .toc to override non-@supports rules. */
		#toc {
			display: grid;
			align-content: start;
			grid-template-columns: auto 1fr;
			grid-column-gap: 1rem;
			column-gap: 1rem;
			grid-row-gap: .6rem;
			row-gap: .6rem;
		}
		#toc h2 {
			grid-column: 1 / -1;
			margin-bottom: 0;
		}
		#toc ol,
		#toc li,
		#toc a {
			display: contents;
			/* Switch <a> to subgrid when supported */
		}
		#toc span {
			margin: 0;
		}
		#toc > .toc > li > a > span {
			/* The spans of the top-level list,
			   comprising the first items of each top-level section. */
			margin-top: 1.1rem;
		}
		#toc#toc .secno { /* Ugh, need more specificity to override base.css */
			grid-column: 1;
			width: auto;
			margin-left: 0;
		}
		#toc .content {
			grid-column: 2;
			width: auto;
			margin-right: 1rem;
		}
		#toc .content:hover {
			background: rgba(75%, 75%, 75%, .25);
			border-bottom: 3px solid #054572;
			margin-bottom: -3px;
		}
		#toc li li li .content {
			margin-left: 1rem;
		}
		#toc li li li li .content {
			margin-left: 2rem;
		}
	}


/** Index *********************************************************************/

	/* Index Lists: Layout */
	ul.index       { margin-left: 0; columns: 15em; text-indent: 1em hanging; }
	ul.index li    { margin-left: 0; list-style: none; break-inside: avoid; }
	ul.index li li { margin-left: 1em }
	ul.index dl    { margin-top: 0; }
	ul.index dt    { margin: .2em 0 .2em 20px;}
	ul.index dd    { margin: .2em 0 .2em 40px;}
	/* Index Lists: Typography */
	ul.index ul,
	ul.index dl { font-size: smaller; }
	@media not print {
		ul.index li span {
			white-space: nowrap;
			color: transparent; }
		ul.index li a:hover + span,
		ul.index li a:focus + span {
			color: #707070;
		}
	}

/** Index Tables *****************************************************/
	/* See also the data table styling section, which this effectively subclasses */

	table.index {
		font-size: small;
		border-collapse: collapse;
		border-spacing: 0;
		text-align: left;
		margin: 1em 0;
	}

	table.index td,
	table.index th {
		padding: 0.4em;
	}

	table.index tr:hover td:not([rowspan]),
	table.index tr:hover th:not([rowspan]) {
		background: #f7f8f9;
	}

	/* The link in the first column in the property table (formerly a TD) */
	table.index th:first-child a {
		font-weight: bold;
	}

/******************************************************************************/
/*                                    Print                                   */
/******************************************************************************/

	@media print {
		/* Pages have their own margins. */
		html {
			margin: 0;
		}
		/* Serif for print. */
		body {
			font-family: serif;
		}
	}
	@page {
		margin: 1.5cm 1.1cm;
	}

/******************************************************************************/
/*                                    Legacy                                  */
/******************************************************************************/

	/* This rule is inherited from past style sheets. No idea what it's for. */
	.hide { display: none }



/******************************************************************************/
/*                             Overflow Control                               */
/******************************************************************************/

	.figure .caption, .sidefigure .caption, figcaption {
		/* in case figure is overlarge, limit caption to 50em */
		max-width: 50rem;
		margin-left: auto;
		margin-right: auto;
	}
	.overlarge {
		/* Magic to create good table positioning:
		   "content column" is 50ems wide at max; less on smaller screens.
		   Extra space (after ToC + content) is empty on the right.

		   1. When table < content column, centers table in column.
		   2. When content < table < available, left-aligns.
		   3. When table > available, fills available + scroll bar.
		*/ 
		display: grid;
		grid-template-columns: minmax(0, 50em);
	}
	.overlarge > table {
		/* limit preferred width of table */
		max-width: 50em;
		margin-left: auto;
		margin-right: auto;
	}

	@media (min-width: 55em) {
		.overlarge {
			margin-right: calc(13px + 26.5rem - 50vw);
			max-width: none;
		}
	}
	@media screen and (min-width: 78em) {
		body:not(.toc-inline) .overlarge {
			/* 30.5em body padding 50em content area */
			margin-right: calc(40em - 50vw) !important;
		}
	}
	@media screen and (min-width: 90em) {
		body:not(.toc-inline) .overlarge {
			/* 4em html margin 30.5em body padding 50em content area */
			margin-right: calc(84.5em - 100vw) !important;
		}
	}

	@media not print {
		.overlarge {
			overflow-x: auto;
			/* See Lea Verou's explanation background-attachment:
			 * http://lea.verou.me/2012/04/background-attachment-local/
			 *
			background: top left  / 4em 100% linear-gradient(to right,  #ffffff, rgba(255, 255, 255, 0)) local,
			            top right / 4em 100% linear-gradient(to left, #ffffff, rgba(255, 255, 255, 0)) local,
			            top left  / 1em 100% linear-gradient(to right,  #c3c3c5, rgba(195, 195, 197, 0)) scroll,
			            top right / 1em 100% linear-gradient(to left, #c3c3c5, rgba(195, 195, 197, 0)) scroll,
			            white;
			background-repeat: no-repeat;
			*/
		}
	}
</style>
  <link href="https://www.w3.org/StyleSheets/TR/2016/cg-draft" rel="stylesheet">
  <link href="https://wicg.github.io/layout-instability" rel="canonical">
<style>/* style-md-lists */

/* This is a weird hack for me not yet following the commonmark spec
   regarding paragraph and lists. */
[data-md] > :first-child {
    margin-top: 0;
}
[data-md] > :last-child {
    margin-bottom: 0;
}</style>
<style>/* style-selflinks */

.heading, .issue, .note, .example, li, dt {
    position: relative;
}
a.self-link {
    position: absolute;
    top: 0;
    left: calc(-1 * (3.5rem - 26px));
    width: calc(3.5rem - 26px);
    height: 2em;
    text-align: center;
    border: none;
    transition: opacity .2s;
    opacity: .5;
}
a.self-link:hover {
    opacity: 1;
}
.heading > a.self-link {
    font-size: 83%;
}
li > a.self-link {
    left: calc(-1 * (3.5rem - 26px) - 2em);
}
dfn > a.self-link {
    top: auto;
    left: auto;
    opacity: 0;
    width: 1.5em;
    height: 1.5em;
    background: gray;
    color: white;
    font-style: normal;
    transition: opacity .2s, background-color .2s, color .2s;
}
dfn:hover > a.self-link {
    opacity: 1;
}
dfn > a.self-link:hover {
    color: black;
}

a.self-link::before            { content: "¶"; }
.heading > a.self-link::before { content: "§"; }
dfn > a.self-link::before      { content: "#"; }</style>
<style>/* style-counters */

body {
    counter-reset: example figure issue;
}
.issue {
    counter-increment: issue;
}
.issue:not(.no-marker)::before {
    content: "Issue " counter(issue);
}

.example {
    counter-increment: example;
}
.example:not(.no-marker)::before {
    content: "Example " counter(example);
}
.invalid.example:not(.no-marker)::before,
.illegal.example:not(.no-marker)::before {
    content: "Invalid Example" counter(example);
}

figcaption {
    counter-increment: figure;
}
figcaption:not(.no-marker)::before {
    content: "Figure " counter(figure) " ";
}</style>
<style>/* style-var-click-highlighting */

    var { cursor: pointer; }
    var.selected0 { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; }
    var.selected1 { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; }
    var.selected2 { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; }
    var.selected3 { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; }
    var.selected4 { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; }
    var.selected5 { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; }
    var.selected6 { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; }
    </style>
<style>/* style-autolinks */

.css.css, .property.property, .descriptor.descriptor {
    color: #005a9c;
    font-size: inherit;
    font-family: inherit;
}
.css::before, .property::before, .descriptor::before {
    content: "‘";
}
.css::after, .property::after, .descriptor::after {
    content: "’";
}
.property, .descriptor {
    /* Don't wrap property and descriptor names */
    white-space: nowrap;
}
.type { /* CSS value <type> */
    font-style: italic;
}
pre .property::before, pre .property::after {
    content: "";
}
[data-link-type="property"]::before,
[data-link-type="propdesc"]::before,
[data-link-type="descriptor"]::before,
[data-link-type="value"]::before,
[data-link-type="function"]::before,
[data-link-type="at-rule"]::before,
[data-link-type="selector"]::before,
[data-link-type="maybe"]::before {
    content: "‘";
}
[data-link-type="property"]::after,
[data-link-type="propdesc"]::after,
[data-link-type="descriptor"]::after,
[data-link-type="value"]::after,
[data-link-type="function"]::after,
[data-link-type="at-rule"]::after,
[data-link-type="selector"]::after,
[data-link-type="maybe"]::after {
    content: "’";
}

[data-link-type].production::before,
[data-link-type].production::after,
.prod [data-link-type]::before,
.prod [data-link-type]::after {
    content: "";
}

[data-link-type=element],
[data-link-type=element-attr] {
    font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace;
    font-size: .9em;
}
[data-link-type=element]::before { content: "<" }
[data-link-type=element]::after  { content: ">" }

[data-link-type=biblio] {
    white-space: pre;
}</style>
<style>/* style-dfn-panel */

.dfn-panel {
    position: absolute;
    z-index: 35;
    height: auto;
    width: -webkit-fit-content;
    width: fit-content;
    max-width: 300px;
    max-height: 500px;
    overflow: auto;
    padding: 0.5em 0.75em;
    font: small Helvetica Neue, sans-serif, Droid Sans Fallback;
    background: #DDDDDD;
    color: black;
    border: outset 0.2em;
}
.dfn-panel:not(.on) { display: none; }
.dfn-panel * { margin: 0; padding: 0; text-indent: 0; }
.dfn-panel > b { display: block; }
.dfn-panel a { color: black; }
.dfn-panel a:not(:hover) { text-decoration: none !important; border-bottom: none !important; }
.dfn-panel > b + b { margin-top: 0.25em; }
.dfn-panel ul { padding: 0; }
.dfn-panel li { list-style: inside; }
.dfn-panel.activated {
    display: inline-block;
    position: fixed;
    left: .5em;
    bottom: 2em;
    margin: 0 auto;
    max-width: calc(100vw - 1.5em - .4em - .5em);
    max-height: 30vh;
}

.dfn-paneled { cursor: pointer; }
</style>
<style>/* style-syntax-highlighting */
pre.idl.highlight { color: #708090; }
.highlight:not(.idl) { background: hsl(24, 20%, 95%); }
code.highlight { padding: .1em; border-radius: .3em; }
pre.highlight, pre > code.highlight { display: block; padding: 1em; margin: .5em 0; overflow: auto; border-radius: 0; }
c-[a] { color: #990055 } /* Keyword.Declaration */
c-[b] { color: #990055 } /* Keyword.Type */
c-[c] { color: #708090 } /* Comment */
c-[d] { color: #708090 } /* Comment.Multiline */
c-[e] { color: #0077aa } /* Name.Attribute */
c-[f] { color: #669900 } /* Name.Tag */
c-[g] { color: #222222 } /* Name.Variable */
c-[k] { color: #990055 } /* Keyword */
c-[l] { color: #000000 } /* Literal */
c-[m] { color: #000000 } /* Literal.Number */
c-[n] { color: #0077aa } /* Name */
c-[o] { color: #999999 } /* Operator */
c-[p] { color: #999999 } /* Punctuation */
c-[s] { color: #a67f59 } /* Literal.String */
c-[t] { color: #a67f59 } /* Literal.String.Single */
c-[u] { color: #a67f59 } /* Literal.String.Double */
c-[cp] { color: #708090 } /* Comment.Preproc */
c-[c1] { color: #708090 } /* Comment.Single */
c-[cs] { color: #708090 } /* Comment.Special */
c-[kc] { color: #990055 } /* Keyword.Constant */
c-[kn] { color: #990055 } /* Keyword.Namespace */
c-[kp] { color: #990055 } /* Keyword.Pseudo */
c-[kr] { color: #990055 } /* Keyword.Reserved */
c-[ld] { color: #000000 } /* Literal.Date */
c-[nc] { color: #0077aa } /* Name.Class */
c-[no] { color: #0077aa } /* Name.Constant */
c-[nd] { color: #0077aa } /* Name.Decorator */
c-[ni] { color: #0077aa } /* Name.Entity */
c-[ne] { color: #0077aa } /* Name.Exception */
c-[nf] { color: #0077aa } /* Name.Function */
c-[nl] { color: #0077aa } /* Name.Label */
c-[nn] { color: #0077aa } /* Name.Namespace */
c-[py] { color: #0077aa } /* Name.Property */
c-[ow] { color: #999999 } /* Operator.Word */
c-[mb] { color: #000000 } /* Literal.Number.Bin */
c-[mf] { color: #000000 } /* Literal.Number.Float */
c-[mh] { color: #000000 } /* Literal.Number.Hex */
c-[mi] { color: #000000 } /* Literal.Number.Integer */
c-[mo] { color: #000000 } /* Literal.Number.Oct */
c-[sb] { color: #a67f59 } /* Literal.String.Backtick */
c-[sc] { color: #a67f59 } /* Literal.String.Char */
c-[sd] { color: #a67f59 } /* Literal.String.Doc */
c-[se] { color: #a67f59 } /* Literal.String.Escape */
c-[sh] { color: #a67f59 } /* Literal.String.Heredoc */
c-[si] { color: #a67f59 } /* Literal.String.Interpol */
c-[sx] { color: #a67f59 } /* Literal.String.Other */
c-[sr] { color: #a67f59 } /* Literal.String.Regex */
c-[ss] { color: #a67f59 } /* Literal.String.Symbol */
c-[vc] { color: #0077aa } /* Name.Variable.Class */
c-[vg] { color: #0077aa } /* Name.Variable.Global */
c-[vi] { color: #0077aa } /* Name.Variable.Instance */
c-[il] { color: #000000 } /* Literal.Number.Integer.Long */
</style>
 <body class="h-entry">
  <div class="head">
   <p data-fill-with="logo"></p>
   <h1 class="p-name no-ref" id="title">Layout Instability API</h1>
   <h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">Draft Community Group Report, <time class="dt-updated" datetime="1970-01-01">1 January 1970</time></span></h2>
   <div data-fill-with="spec-metadata">
    <dl>
     <dt>This version:
     <dd><a class="u-url" href="https://wicg.github.io/layout-instability">https://wicg.github.io/layout-instability</a>
     <dt class="editor">Editors:
     <dd class="editor p-author h-card vcard"><a class="p-name fn u-url url" href="https://google.com">Steve Kobes</a> (<span class="p-org org">Google</span>) <a class="u-email email" href="mailto:skobes@chromium.org">skobes@chromium.org</a>
     <dd class="editor p-author h-card vcard"><a class="p-name fn u-url url" href="https://google.com">Nicolás Peña Moreno</a> (<span class="p-org org">Google</span>) <a class="u-email email" href="mailto:npm@chromium.org">npm@chromium.org</a>
     <dd class="editor p-author h-card vcard"><a class="p-name fn u-url url" href="https://google.com">Emily Hanley</a> (<span class="p-org org">Google</span>) <a class="u-email email" href="mailto:eyaich@chromium.org">eyaich@chromium.org</a>
    </dl>
   </div>
   <div data-fill-with="warning"></div>
   <p class="copyright" data-fill-with="copyright"><a href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 1970 the Contributors to the Layout Instability API Specification, published by the <a href="https://www.w3.org/community/wicg/">Web Platform Incubator Community Group</a> under the <a href="https://www.w3.org/community/about/agreements/cla/">W3C Community Contributor License Agreement (CLA)</a>.
A human-readable <a href="http://www.w3.org/community/about/agreements/cla-deed/">summary</a> is available. </p>
   <hr title="Separator for header">
  </div>
  <div class="p-summary" data-fill-with="abstract">
   <h2 class="no-num no-toc no-ref heading settled" id="abstract"><span class="content">Abstract</span></h2>
   <p>This document defines an API that provides web page authors with insights into the stability of their pages based on movements of the elements on the page.</p>
  </div>
  <div data-fill-with="at-risk"></div>
  <h2 class="no-num no-toc no-ref heading settled" id="status"><span class="content">Status of this document</span></h2>
  <div data-fill-with="status">
   <p> This specification was published by the <a href="https://www.w3.org/community/wicg/">Web Platform Incubator Community Group</a>.
  It is not a W3C Standard nor is it on the W3C Standards Track.

  Please note that under the <a href="https://www.w3.org/community/about/agreements/cla/">W3C Community Contributor License Agreement (CLA)</a> there is a limited opt-out and other conditions apply.

  Learn more about <a href="http://www.w3.org/community/">W3C Community and Business Groups</a>. </p>
   <p></p>
  </div>
  <div data-fill-with="at-risk"></div>
  <nav data-fill-with="table-of-contents" id="toc">
   <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2>
   <ol class="toc" role="directory">
    <li>
     <a href="#sec-intro"><span class="secno">1</span> <span class="content">Introduction</span></a>
     <ol class="toc">
      <li><a href="#end-of-session"><span class="secno">1.1</span> <span class="content">End of session signal</span></a>
      <li><a href="#example"><span class="secno">1.2</span> <span class="content">Usage example</span></a>
     </ol>
    <li>
     <a href="#sec-terminology"><span class="secno">2</span> <span class="content">Terminology</span></a>
     <ol class="toc">
      <li><a href="#sec-basic-concepts"><span class="secno">2.1</span> <span class="content">Basic Concepts</span></a>
      <li><a href="#sec-unstable-nodes"><span class="secno">2.2</span> <span class="content">Unstable Nodes</span></a>
      <li><a href="#sec-layout-shift-value"><span class="secno">2.3</span> <span class="content">Layout Shift Value</span></a>
      <li><a href="#sec-input-exclusion"><span class="secno">2.4</span> <span class="content">Input Exclusion</span></a>
     </ol>
    <li><a href="#sec-layout-shift"><span class="secno">3</span> <span class="content"><code class="idl"><span>LayoutShift</span></code> interface</span></a>
    <li>
     <a href="#sec-processing-model"><span class="secno">4</span> <span class="content">Processing model</span></a>
     <ol class="toc">
      <li><a href="#sec-report-layout-shift"><span class="secno">4.1</span> <span class="content">Report the layout shift</span></a>
     </ol>
    <li><a href="#priv-sec"><span class="secno">5</span> <span class="content">Security &amp; privacy considerations</span></a>
    <li><a href="#conformance"><span class="secno"></span> <span class="content"> Conformance</span></a>
    <li>
     <a href="#index"><span class="secno"></span> <span class="content">Index</span></a>
     <ol class="toc">
      <li><a href="#index-defined-here"><span class="secno"></span> <span class="content">Terms defined by this specification</span></a>
      <li><a href="#index-defined-elsewhere"><span class="secno"></span> <span class="content">Terms defined by reference</span></a>
     </ol>
    <li>
     <a href="#references"><span class="secno"></span> <span class="content">References</span></a>
     <ol class="toc">
      <li><a href="#normative"><span class="secno"></span> <span class="content">Normative References</span></a>
     </ol>
    <li><a href="#idl-index"><span class="secno"></span> <span class="content">IDL Index</span></a>
   </ol>
  </nav>
  <main>
   <div class="non-normative">
    <h2 class="heading settled" data-level="1" id="sec-intro"><span class="secno">1. </span><span class="content">Introduction</span><a class="self-link" href="#sec-intro"></a></h2>
    <p><em>This section is non-normative.</em></p>
    <p>The shifting of DOM elements on a webpage detracts from the user’s experience,
and occurs frequently on the web today. This shifting is often due to content
loading asynchronously and displacing other elements on the page.</p>
    <p>The layout Instability API identifies these unstable pages by reporting a value
(the "layout shift") for each animation frame in the user’s session.  This
specification presents a method for a user agent to compute the layout shift
value.</p>
    <p>The layout shift value is expected to have a general correspondence to
the severity of layout instability at a particular time.  The method of computing
it considers both the area of the region impacted by instability and the distance
by which elements on the page are shifted.</p>
    <p>The developer can use the layout shift values that are reported by this API
to compute a cumulative score (the "cumulative layout shift score").</p>
    <p>The cumulative layout shift score is expected to have a general correspondence to
the severity of layout instability for the lifetime of a page.</p>
    <h3 class="heading settled" data-level="1.1" id="end-of-session"><span class="secno">1.1. </span><span class="content">End of session signal</span><a class="self-link" href="#end-of-session"></a></h3>
    <p><em>This section is non-normative.</em></p>
    <p>The developer can compute a cumulative layout shift score by summing the layout
shift values as they are reported to the observer.</p>
    <p>A "final" score for the user’s session can be reported by listening to the <a href="https://developers.google.com/web/updates/2018/07/page-lifecycle-api#event-visibilitychange">visibilitychange event</a>,
and taking the value of the cumulative layout shift score at that time.</p>
    <p>This strategy is illustrated in the usage example.</p>
    <h3 class="heading settled" data-level="1.2" id="example"><span class="secno">1.2. </span><span class="content">Usage example</span><a class="self-link" href="#example"></a></h3>
    <p><em>This section is non-normative.</em></p>
<pre class="example highlight" id="example-7ea3aa6b"><a class="self-link" href="#example-7ea3aa6b"></a><c- c1>// Stores the current layout shift score for the page.</c->
<c- a>let</c-> cumulativeLayoutShiftScore <c- o>=</c-> <c- mi>0</c-><c- p>;</c->

<c- c1>// Detects new layout shift occurrences and updates the</c->
<c- c1>// `cumulativeLayoutShiftScore` variable.</c->
<c- kr>const</c-> observer <c- o>=</c-> <c- k>new</c-> PerformanceObserver<c- p>((</c->list<c- p>)</c-> <c- p>=></c-> <c- p>{</c->
  <c- k>for</c-> <c- p>(</c-><c- kr>const</c-> entry <c- k>of</c-> list<c- p>.</c->getEntries<c- p>())</c-> <c- p>{</c->
    <c- c1>// Only count layout shifts without recent user input.</c->
    <c- k>if</c-> <c- p>(</c-><c- o>!</c->entry<c- p>.</c->hadRecentInput<c- p>)</c-> <c- p>{</c->
      cumulativeLayoutShiftScore <c- o>+=</c-> entry<c- p>.</c->value<c- p>;</c->
    <c- p>}</c->
  <c- p>}</c->
<c- p>});</c->

observer<c- p>.</c->observe<c- p>({</c->type<c- o>:</c-> <c- t>'layout-shift'</c-><c- p>,</c-> buffered<c- o>:</c-> <c- kc>true</c-><c- p>});</c->

<c- c1>// Sends the final score to your analytics back end once</c->
<c- c1>// the page’s lifecycle state becomes hidden.</c->
document<c- p>.</c->addEventListener<c- p>(</c-><c- t>'visibilitychange'</c-><c- p>,</c-> <c- p>()</c-> <c- p>=></c-> <c- p>{</c->
  <c- k>if</c-> <c- p>(</c->document<c- p>.</c->visibilityState <c- o>===</c-> <c- t>'hidden'</c-><c- p>)</c-> <c- p>{</c->
    <c- c1>// Force any pending records to be dispatched.</c->
    observer<c- p>.</c->takeRecords<c- p>();</c->

    <c- c1>// Send the final score to your analytics back end</c->
    <c- c1>// (assumes `sendToAnalytics` is defined elsewhere).</c->
    sendToAnalytics<c- p>({</c->cumulativeLayoutShiftScore<c- p>});</c->
  <c- p>}</c->
<c- p>});</c->
</pre>
    <p>The layout shift score is only one signal, which correlates in an approximate
manner with the user experience of "jumpiness".</p>
    <p>Developers should avoid relying on the precise value of the layout shift score,
as the metric might evolve over time, and user agents might compromise precision
in the interest of calculation efficiency.</p>
   </div>
   <h2 class="heading settled" data-level="2" id="sec-terminology"><span class="secno">2. </span><span class="content">Terminology</span><a class="self-link" href="#sec-terminology"></a></h2>
   <h3 class="heading settled" data-level="2.1" id="sec-basic-concepts"><span class="secno">2.1. </span><span class="content">Basic Concepts</span><a class="self-link" href="#sec-basic-concepts"></a></h3>
   <p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="starting-point">starting point</dfn> of a <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#node" id="ref-for-node">Node</a></code> <var>N</var> in a coordinate space <var>C</var> is defined as follows:</p>
   <ul>
    <li data-md>
     <p>If <var>N</var> is an <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#element" id="ref-for-element">Element</a></code> which generates one or more <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#box" id="ref-for-box">boxes</a>, the
starting point of <var>N</var> in <var>C</var> is the two-dimensional offset in <a data-link-type="dfn" href="https://www.w3.org/TR/css-values-4/#pixel-unit" id="ref-for-pixel-unit">pixel
units</a> from the origin of <var>C</var> to the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#flow-relative" id="ref-for-flow-relative">flow-relative</a> starting corner
of the first <a data-link-type="dfn" href="https://drafts.csswg.org/css-break-4/#fragment" id="ref-for-fragment">fragment</a> of the <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#principal-box" id="ref-for-principal-box">principal box</a> of <var>N</var>.</p>
    <li data-md>
     <p>If <var>N</var> is a <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#text-nodes" id="ref-for-text-nodes">text node</a>, the starting point of <var>N</var> in <var>C</var> is the
two-dimensional offset in <a data-link-type="dfn" href="https://www.w3.org/TR/css-values-4/#pixel-unit" id="ref-for-pixel-unit①">pixel units</a> from the origin of C to the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#flow-relative" id="ref-for-flow-relative①">flow-relative</a> starting corner of the first <a data-link-type="dfn" href="https://www.w3.org/TR/css-text-3/#line-breaking" id="ref-for-line-breaking">line box</a> generated
by <var>N</var>.</p>
   </ul>
   <p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="visual-representation">visual representation</dfn> of a <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#node" id="ref-for-node①">Node</a></code> <var>N</var> is defined as
follows:</p>
   <ul>
    <li data-md>
     <p>If <var>N</var> is an <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#element" id="ref-for-element①">Element</a></code> which generates one or more <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#box" id="ref-for-box①">boxes</a>, the visual
representation of <var>N</var> is the set of all points that lie within the bounds of
any <a data-link-type="dfn" href="https://drafts.csswg.org/css-break-4/#fragment" id="ref-for-fragment①">fragment</a> of any <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#box" id="ref-for-box②">box</a> generated by <var>N</var>, in the coordinate
space of the <a data-link-type="dfn" href="https://www.w3.org/TR/cssom-view-1/#viewport" id="ref-for-viewport">viewport</a>, excluding any points that lie outside of the <a data-link-type="dfn" href="https://www.w3.org/TR/cssom-view-1/#viewport" id="ref-for-viewport①">viewport</a>.</p>
    <li data-md>
     <p>If <var>N</var> is a <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#text-nodes" id="ref-for-text-nodes①">text node</a>, the visual representation of <var>N</var> is the set of
all points that lie within the bounds of any <a data-link-type="dfn" href="https://www.w3.org/TR/css-text-3/#line-breaking" id="ref-for-line-breaking①">line box</a> generated by <var>N</var>, in the coordinate space of the <a data-link-type="dfn" href="https://www.w3.org/TR/cssom-view-1/#viewport" id="ref-for-viewport②">viewport</a>, excluding any points
that lie outside of the <a data-link-type="dfn" href="https://www.w3.org/TR/cssom-view-1/#viewport" id="ref-for-viewport③">viewport</a>.</p>
   </ul>
   <p>A condition holds <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="in-the-previous-frame">in the previous frame</dfn> if it was true at the
point in time immediately after the most recently completed invocation of the <a data-link-type="dfn" href="#report-the-layout-shift" id="ref-for-report-the-layout-shift">report the layout shift</a> algorithm.</p>
   <p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="previous-frame-starting-point">previous frame starting point</dfn> of a <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#node" id="ref-for-node②">Node</a></code> <var>N</var> in a
coordinate space <var>C</var> is the point which, <a data-link-type="dfn" href="#in-the-previous-frame" id="ref-for-in-the-previous-frame">in the previous frame</a>, was the <a data-link-type="dfn" href="#starting-point" id="ref-for-starting-point">starting point</a> of <var>N</var> in <var>C</var>.</p>
   <p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="previous-frame-visual-representation">previous frame visual representation</dfn> of a <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#node" id="ref-for-node③">Node</a></code> <var>N</var> is
the set which, <a data-link-type="dfn" href="#in-the-previous-frame" id="ref-for-in-the-previous-frame①">in the previous frame</a>, was the <a data-link-type="dfn" href="#visual-representation" id="ref-for-visual-representation">visual
representation</a> of <var>N</var>.</p>
   <h3 class="heading settled" data-level="2.2" id="sec-unstable-nodes"><span class="secno">2.2. </span><span class="content">Unstable Nodes</span><a class="self-link" href="#sec-unstable-nodes"></a></h3>
   <p>A <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#node" id="ref-for-node④">Node</a></code> <var>N</var> <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="has-shifted">has shifted</dfn> in a coordinate space <var>C</var> if the <a data-link-type="dfn" href="#starting-point" id="ref-for-starting-point①">starting point</a> of <var>N</var> in <var>C</var> differs from the <a data-link-type="dfn" href="#previous-frame-starting-point" id="ref-for-previous-frame-starting-point">previous frame starting
point</a> of <var>N</var> in <var>C</var> by 3 or more <a data-link-type="dfn" href="https://www.w3.org/TR/css-values-4/#pixel-unit" id="ref-for-pixel-unit②">pixel units</a> in either the horizontal
or vertical direction.</p>
   <p>Otherwise, <var>N</var> <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="has-not-shifted">has not shifted</dfn> in <var>C</var>.</p>
   <p>A <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#node" id="ref-for-node⑤">Node</a></code> <var>N</var> is <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="unstable">unstable</dfn> if:</p>
   <ul>
    <li data-md>
     <p><var>N</var> is either</p>
     <ul>
      <li data-md>
       <p>an <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#element" id="ref-for-element②">Element</a></code> which generates one or more <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#box" id="ref-for-box③">boxes</a>, or</p>
      <li data-md>
       <p>a <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#text-nodes" id="ref-for-text-nodes②">text node</a>; and</p>
     </ul>
    <li data-md>
     <p><var>N</var> <a data-link-type="dfn" href="#has-shifted" id="ref-for-has-shifted">has shifted</a> in the coordinate space of the <a data-link-type="dfn" href="https://www.w3.org/TR/cssom-view-1/#viewport" id="ref-for-viewport④">viewport</a>; and</p>
    <li data-md>
     <p><var>N</var> <a data-link-type="dfn" href="#has-shifted" id="ref-for-has-shifted①">has shifted</a> in the coordinate space of the <a data-link-type="dfn" href="https://www.w3.org/TR/CSS2/visudet.html#containing-block-details" id="ref-for-containing-block-details">initial containing
block</a>; and</p>
    <li data-md>
     <p>there does not exist an <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#element" id="ref-for-element③">Element</a></code> <var>P</var> such that</p>
     <ol>
      <li data-md>
       <p>currently and <a data-link-type="dfn" href="#in-the-previous-frame" id="ref-for-in-the-previous-frame②">in the previous frame</a>, <var>P</var> is in the <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#containing-block-chain" id="ref-for-containing-block-chain">containing
block chain</a> of <var>N</var>, and</p>
      <li data-md>
       <p>currently and <a data-link-type="dfn" href="#in-the-previous-frame" id="ref-for-in-the-previous-frame③">in the previous frame</a>, <var>P</var> has a <a data-link-type="dfn" href="https://drafts.csswg.org/css-transforms-1/#local-coordinate-system" id="ref-for-local-coordinate-system">local coordinate
system</a> or a <a data-link-type="dfn" href="https://drafts.csswg.org/css-overflow-3/#scrollable-overflow-region" id="ref-for-scrollable-overflow-region">scrollable overflow region</a>, and</p>
      <li data-md>
       <p><var>P</var> is not <a data-link-type="dfn" href="#unstable" id="ref-for-unstable">unstable</a>, and</p>
      <li data-md>
       <p><var>N</var> <a data-link-type="dfn" href="#has-not-shifted" id="ref-for-has-not-shifted">has not shifted</a> in the coordinate space of the <a data-link-type="dfn" href="https://drafts.csswg.org/css-transforms-1/#local-coordinate-system" id="ref-for-local-coordinate-system①">local
coordinate system</a> or <a data-link-type="dfn" href="https://drafts.csswg.org/css-overflow-3/#scrollable-overflow-region" id="ref-for-scrollable-overflow-region①">scrollable overflow region</a> of <var>P</var>.</p>
     </ol>
   </ul>
   <p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="unstable-node-set">unstable node set</dfn> of a <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document" id="ref-for-document">Document</a></code> <var>D</var> is the set
containing every <a data-link-type="dfn" href="#unstable" id="ref-for-unstable①">unstable</a> <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-shadow-including-descendant" id="ref-for-concept-shadow-including-descendant">shadow-including descendant</a> of <var>D</var>.</p>
   <p class="note" role="note"><span>NOTE:</span> In the first frame, the previous frame starting point does not exist for
any node, and therefore the unstable node set is empty.</p>
   <h3 class="heading settled" data-level="2.3" id="sec-layout-shift-value"><span class="secno">2.3. </span><span class="content">Layout Shift Value</span><a class="self-link" href="#sec-layout-shift-value"></a></h3>
   <p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="viewport-base-distance">viewport base distance</dfn> is the greater of the <a data-link-type="dfn" href="https://wicg.github.io/visual-viewport/index.html#dom-visualviewport-width" id="ref-for-dom-visualviewport-width">visual
viewport width</a> or the <a data-link-type="dfn" href="https://wicg.github.io/visual-viewport/index.html#dom-visualviewport-height" id="ref-for-dom-visualviewport-height">visual viewport height</a>.</p>
   <p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="move-vector">move vector</dfn> of a <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#node" id="ref-for-node⑥">Node</a></code> <var>N</var> is the two-dimensional
offset in <a data-link-type="dfn" href="https://www.w3.org/TR/css-values-4/#pixel-unit" id="ref-for-pixel-unit③">pixel units</a> from</p>
   <ul>
    <li data-md>
     <p>the <a data-link-type="dfn" href="#previous-frame-starting-point" id="ref-for-previous-frame-starting-point①">previous frame starting point</a> of <var>N</var> in the coordinate space of the <a data-link-type="dfn" href="https://www.w3.org/TR/cssom-view-1/#viewport" id="ref-for-viewport⑤">viewport</a>, to</p>
    <li data-md>
     <p>the <a data-link-type="dfn" href="#starting-point" id="ref-for-starting-point②">starting point</a> of <var>N</var> in the coordinate space of the <a data-link-type="dfn" href="https://www.w3.org/TR/cssom-view-1/#viewport" id="ref-for-viewport⑥">viewport</a>.</p>
   </ul>
   <p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="move-distance">move distance</dfn> of a <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#node" id="ref-for-node⑦">Node</a></code> <var>N</var> is the greater of</p>
   <ul>
    <li data-md>
     <p>the absolute value of the horizontal component of the <a data-link-type="dfn" href="#move-vector" id="ref-for-move-vector">move vector</a> of <var>N</var>, or</p>
    <li data-md>
     <p>the absolute value of the vertical component of the <a data-link-type="dfn" href="#move-vector" id="ref-for-move-vector①">move vector</a> of <var>N</var>.</p>
   </ul>
   <p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="maximum-move-distance">maximum move distance</dfn> of a <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document" id="ref-for-document①">Document</a></code> <var>D</var> is the
greatest <a data-link-type="dfn" href="#move-distance" id="ref-for-move-distance">move distance</a> of any <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#node" id="ref-for-node⑧">Node</a></code> in the <a data-link-type="dfn" href="#unstable-node-set" id="ref-for-unstable-node-set">unstable node set</a> of <var>D</var>, or 0 if the <a data-link-type="dfn" href="#unstable-node-set" id="ref-for-unstable-node-set①">unstable node set</a> of <var>D</var> is empty.</p>
   <p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="distance-fraction">distance fraction</dfn> of a <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document" id="ref-for-document②">Document</a></code> <var>D</var> is the lesser of</p>
   <ul>
    <li data-md>
     <p>the <a data-link-type="dfn" href="#maximum-move-distance" id="ref-for-maximum-move-distance">maximum move distance</a> of <var>D</var> divided by the <a data-link-type="dfn" href="#viewport-base-distance" id="ref-for-viewport-base-distance">viewport base
distance</a>, or</p>
    <li data-md>
     <p>1.0.</p>
   </ul>
   <p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="impact-region">impact region</dfn> of a <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document" id="ref-for-document③">Document</a></code> <var>D</var> is the set containing</p>
   <ul>
    <li data-md>
     <p>every point in the <a data-link-type="dfn" href="#visual-representation" id="ref-for-visual-representation①">visual representation</a> of any <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#node" id="ref-for-node⑨">Node</a></code> in the <a data-link-type="dfn" href="#unstable-node-set" id="ref-for-unstable-node-set②">unstable node set</a> of <var>D</var>, and</p>
    <li data-md>
     <p>every point in the <a data-link-type="dfn" href="#previous-frame-visual-representation" id="ref-for-previous-frame-visual-representation">previous frame visual representation</a> of any <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#node" id="ref-for-node①⓪">Node</a></code> in the <a data-link-type="dfn" href="#unstable-node-set" id="ref-for-unstable-node-set③">unstable node set</a> of <var>D</var>.</p>
   </ul>
   <p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="impact-fraction">impact fraction</dfn> of a <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document" id="ref-for-document④">Document</a></code> <var>D</var> is the area of the <a data-link-type="dfn" href="#impact-region" id="ref-for-impact-region">impact region</a> divided by the area of the <a data-link-type="dfn" href="https://www.w3.org/TR/cssom-view-1/#viewport" id="ref-for-viewport⑦">viewport</a>.</p>
   <p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="layout-shift-value">layout shift value</dfn> of a <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document" id="ref-for-document⑤">Document</a></code> <var>D</var> is the <a data-link-type="dfn" href="#impact-fraction" id="ref-for-impact-fraction">impact
fraction</a> of <var>D</var> multiplied by the <a data-link-type="dfn" href="#distance-fraction" id="ref-for-distance-fraction">distance fraction</a> of <var>D</var>.</p>
   <p class="note" role="note"><span>NOTE:</span> The layout shift value takes into account both the fraction of the
viewport that has been impacted by layout instability as well as the greatest
distance by which any given element has moved. This recognizes that a large
element which moves only a small distance can have a low impact on the perceived
instability of the page.</p>
   <h3 class="heading settled" data-level="2.4" id="sec-input-exclusion"><span class="secno">2.4. </span><span class="content">Input Exclusion</span><a class="self-link" href="#sec-input-exclusion"></a></h3>
   <p>An <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="excluding-input">excluding input</dfn> is any event from an input device which
signals a user’s active interaction with the document, or any event which
directly changes the size of the <a data-link-type="dfn" href="https://www.w3.org/TR/cssom-view-1/#viewport" id="ref-for-viewport⑧">viewport</a>.</p>
   <p>Excluding inputs generally include <a href="https://www.w3.org/TR/uievents/#event-type-mousedown">mousedown</a>, <a href="https://www.w3.org/TR/uievents/#keydown">keydown</a>, and <a href="https://www.w3.org/TR/pointerevents/#the-pointerdown-event">pointerdown</a>.
However, an event whose only effect is to begin or update a fling or scroll
gesture is not an excluding input.</p>
   <p>The user agent may delay the reporting of layout shifts after a <a href="https://www.w3.org/TR/pointerevents/#the-pointerdown-event">pointerdown</a> event
until such time as it is known that the event does not begin a fling or scroll
gesture.</p>
   <p>The <a href="https://www.w3.org/TR/uievents/#event-type-mousemove">mousemove</a> and <a href="https://www.w3.org/TR/pointerevents/#the-pointermove-event">pointermove</a> events are also not excluding inputs.</p>
   <h2 class="heading settled" data-level="3" id="sec-layout-shift"><span class="secno">3. </span><span class="content"><code class="idl"><a data-link-type="idl" href="#layoutshift" id="ref-for-layoutshift">LayoutShift</a></code> interface</span><a class="self-link" href="#sec-layout-shift"></a></h2>
<pre class="idl highlight def">[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed"><c- g>Exposed</c-></a>=<c- n>Window</c->]
<c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="layoutshift"><code class="highlight"><c- g>LayoutShift</c-></code></dfn> : <a class="n" data-link-type="idl-name" href="https://w3c.github.io/performance-timeline/#the-performanceentry-interface" id="ref-for-the-performanceentry-interface"><c- n>PerformanceEntry</c-></a> {
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-long" id="ref-for-idl-long"><c- b>long</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="long" href="#dom-layoutshift-value" id="ref-for-dom-layoutshift-value"><c- g>value</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-boolean" id="ref-for-idl-boolean"><c- b>boolean</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="boolean" href="#dom-layoutshift-hadrecentinput" id="ref-for-dom-layoutshift-hadrecentinput"><c- g>hadRecentInput</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://w3c.github.io/hr-time/#idl-def-domhighrestimestamp" id="ref-for-idl-def-domhighrestimestamp"><c- n>DOMHighResTimeStamp</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="DOMHighResTimeStamp" href="#dom-layoutshift-lastinputtime" id="ref-for-dom-layoutshift-lastinputtime"><c- g>lastInputTime</c-></a>;
  [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Default" id="ref-for-Default"><c- g>Default</c-></a>] <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-object" id="ref-for-idl-object"><c- b>object</c-></a> <dfn class="idl-code" data-dfn-for="LayoutShift" data-dfn-type="method" data-export data-lt="toJSON()" id="dom-layoutshift-tojson"><code class="highlight"><c- g>toJSON</c-></code><a class="self-link" href="#dom-layoutshift-tojson"></a></dfn>();
};
</pre>
   <p>All attributes have the values which are assigned to them by the steps to <a data-link-type="dfn" href="#report-the-layout-shift" id="ref-for-report-the-layout-shift①">report the layout shift</a>.</p>
   <p>A user agent implementing the Layout Instability API MUST include <code class="highlight"><c- u>"layout-shift"</c-></code> in <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/performance-timeline/#supportedentrytypes-attribute" id="ref-for-supportedentrytypes-attribute">supportedEntryTypes</a></code> for <a href="https://html.spec.whatwg.org/multipage/window-object.html#the-window-object">Window</a> contexts. This allows developers to detect support for the Layout Instability API.</p>
   <h2 class="heading settled" data-level="4" id="sec-processing-model"><span class="secno">4. </span><span class="content">Processing model</span><a class="self-link" href="#sec-processing-model"></a></h2>
   <p>Within the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#update-the-rendering" id="ref-for-update-the-rendering">update the rendering</a> step of the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#event-loop-processing-model" id="ref-for-event-loop-processing-model">event loop processing
model</a>, a user agent implementing the Layout Instability API MUST perform the
following step after the step that invokes the <a data-link-type="dfn" href="https://w3c.github.io/paint-timing/#mark-paint-timing" id="ref-for-mark-paint-timing">mark paint timing</a> algorithm:</p>
   <ol>
    <li data-md>
     <p>For each fully active <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document" id="ref-for-document⑥">Document</a></code> in <em>docs</em>, invoke the algorithm to <a data-link-type="dfn" href="#report-the-layout-shift" id="ref-for-report-the-layout-shift②">report the layout shift</a> for that <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document" id="ref-for-document⑦">Document</a></code>.</p>
   </ol>
   <h3 class="heading settled" data-level="4.1" id="sec-report-layout-shift"><span class="secno">4.1. </span><span class="content">Report the layout shift</span><a class="self-link" href="#sec-report-layout-shift"></a></h3>
   <div class="algorithm" data-algorithm="report the layout shift">
     When asked to <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="report-the-layout-shift">report the layout shift</dfn> for an active <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document" id="ref-for-document⑧">Document</a></code> <var>D</var>, run the following steps: 
    <ol>
     <li data-md>
      <p>If the current <a data-link-type="dfn" href="#layout-shift-value" id="ref-for-layout-shift-value">layout shift value</a> of <var>D</var> is not 0:</p>
      <ol>
       <li data-md>
        <p>Create a new <code class="idl"><a data-link-type="idl" href="#layoutshift" id="ref-for-layoutshift①">LayoutShift</a></code> object <var>newEntry</var>.</p>
       <li data-md>
        <p>Set <var>newEntry</var>’s <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/performance-timeline/#dom-performanceentry-name" id="ref-for-dom-performanceentry-name">name</a></code> attribute to <code class="highlight"><c- u>"layout-shift"</c-></code>.</p>
       <li data-md>
        <p>Set <var>newEntry</var>’s <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/performance-timeline/#dom-performanceentry-entrytype" id="ref-for-dom-performanceentry-entrytype">entryType</a></code> attribute to <code class="highlight"><c- u>"layout-shift"</c-></code>.</p>
       <li data-md>
        <p>Set <var>newEntry</var>’s <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/performance-timeline/#dom-performanceentry-starttime" id="ref-for-dom-performanceentry-starttime">startTime</a></code> attribute to <a data-link-type="dfn" href="https://w3c.github.io/hr-time/#dfn-current-high-resolution-time" id="ref-for-dfn-current-high-resolution-time">current
high resolution time</a>.</p>
       <li data-md>
        <p>Set <var>newEntry</var>’s <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/performance-timeline/#dom-performanceentry-duration" id="ref-for-dom-performanceentry-duration">duration</a></code> attribute to 0.</p>
       <li data-md>
        <p>Set <var>newEntry</var>’s <dfn class="dfn-paneled idl-code" data-dfn-for="LayoutShift" data-dfn-type="attribute" data-export id="dom-layoutshift-value"><code class="highlight">value</code></dfn> attribute to
the current <a data-link-type="dfn" href="#layout-shift-value" id="ref-for-layout-shift-value①">layout shift value</a> of <var>D</var>.</p>
       <li data-md>
        <p>Set <var>newEntry</var>’s <dfn class="dfn-paneled idl-code" data-dfn-for="LayoutShift" data-dfn-type="attribute" data-export id="dom-layoutshift-lastinputtime"><code class="highlight">lastInputTime</code></dfn> attribute to the time of the most recent <a data-link-type="dfn" href="#excluding-input" id="ref-for-excluding-input">excluding input</a>, or 0 if
no excluding input has occurred during the browsing session.</p>
       <li data-md>
        <p>Set <var>newEntry</var>’s <dfn class="dfn-paneled idl-code" data-dfn-for="LayoutShift" data-dfn-type="attribute" data-export id="dom-layoutshift-hadrecentinput"><code class="highlight">hadRecentInput</code></dfn> attribute to <code class="highlight"><c- kc>true</c-></code> if <code class="idl"><a data-link-type="idl" href="#dom-layoutshift-lastinputtime" id="ref-for-dom-layoutshift-lastinputtime①">lastInputTime</a></code> is less
than 500 milliseconds in the past, and <code class="highlight"><c- kc>false</c-></code> otherwise.</p>
       <li data-md>
        <p><a href="https://w3c.github.io/performance-timeline/#dfn-queue-a-performanceentry">Queue the PerformanceEntry</a> <var>newEntry</var> object.</p>
      </ol>
    </ol>
   </div>
   <h2 class="heading settled" data-level="5" id="priv-sec"><span class="secno">5. </span><span class="content">Security &amp; privacy considerations</span><a class="self-link" href="#priv-sec"></a></h2>
   <p>Layout instability bears an indirect relationship to <a href="https://w3c.github.io/resource-timing/">resource timing</a>, as slow resources could cause intermediate layouts that would not otherwise be performed. Resource timing information can be used by malicious websites for <a data-link-type="dfn" href="https://w3c.github.io/resource-timing/#sec-privacy-security" id="ref-for-sec-privacy-security">statistical fingerprinting</a>.
The layout instability API only reports instability in the current browsing context. It does not directly provide any aggregation of instability scores across multiple browsing contexts. Developers can implement such aggregation manually, but browsing contexts with different <a href="https://html.spec.whatwg.org/multipage/origin.html#concept-origin">origins</a> would need to cooperate to share instability scores.</p>
  </main>
  <div data-fill-with="conformance">
   <h2 class="no-ref no-num heading settled" id="conformance"><span class="content"> Conformance</span><a class="self-link" href="#conformance"></a></h2>
   <p> Conformance requirements are expressed with a combination of descriptive assertions and RFC 2119 terminology.
            The key words “MUST”, “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL”
            in the normative parts of this document
            are to be interpreted as described in RFC 2119.
            However, for readability,
            these words do not appear in all uppercase letters in this specification. </p>
   <p> All of the text of this specification is normative
            except sections explicitly marked as non-normative, examples, and notes. <a data-link-type="biblio" href="#biblio-rfc2119">[RFC2119]</a> </p>
   <p> Examples in this specification are introduced with the words “for example”
            or are set apart from the normative text with <code>class="example"</code>, like this: </p>
   <div class="example" id="example-example"><a class="self-link" href="#example-example"></a> This is an example of an informative example. </div>
   <p> Informative notes begin with the word “Note”
            and are set apart from the normative text with <code>class="note"</code>, like this: </p>
   <p class="note" role="note"> Note, this is an informative note. </p>
  </div>
<script>
(function() {
  "use strict";
  var collapseSidebarText = '<span aria-hidden="true">←</span> '
                          + '<span>Collapse Sidebar</span>';
  var expandSidebarText   = '<span aria-hidden="true">→</span> '
                          + '<span>Pop Out Sidebar</span>';
  var tocJumpText         = '<span aria-hidden="true">↑</span> '
                          + '<span>Jump to Table of Contents</span>';

  var sidebarMedia = window.matchMedia('screen and (min-width: 78em)');
  var autoToggle   = function(e){ toggleSidebar(e.matches) };
  if(sidebarMedia.addListener) {
    sidebarMedia.addListener(autoToggle);
  }

  function toggleSidebar(on) {
    if (on == undefined) {
      on = !document.body.classList.contains('toc-sidebar');
    }

    /* Don’t scroll to compensate for the ToC if we’re above it already. */
    var headY = 0;
    var head = document.querySelector('.head');
    if (head) {
      // terrible approx of "top of ToC"
      headY += head.offsetTop + head.offsetHeight;
    }
    var skipScroll = window.scrollY < headY;

    var toggle = document.getElementById('toc-toggle');
    var tocNav = document.getElementById('toc');
    if (on) {
      var tocHeight = tocNav.offsetHeight;
      document.body.classList.add('toc-sidebar');
      document.body.classList.remove('toc-inline');
      toggle.innerHTML = collapseSidebarText;
      if (!skipScroll) {
        window.scrollBy(0, 0 - tocHeight);
      }
      tocNav.focus();
      sidebarMedia.addListener(autoToggle); // auto-collapse when out of room
    }
    else {
      document.body.classList.add('toc-inline');
      document.body.classList.remove('toc-sidebar');
      toggle.innerHTML = expandSidebarText;
      if (!skipScroll) {
        window.scrollBy(0, tocNav.offsetHeight);
      }
      if (toggle.matches(':hover')) {
        /* Unfocus button when not using keyboard navigation,
           because I don’t know where else to send the focus. */
        toggle.blur();
      }
    }
  }

  function createSidebarToggle() {
    /* Create the sidebar toggle in JS; it shouldn’t exist when JS is off. */
    var toggle = document.createElement('a');
      /* This should probably be a button, but appearance isn’t standards-track.*/
    toggle.id = 'toc-toggle';
    toggle.class = 'toc-toggle';
    toggle.href = '#toc';
    toggle.innerHTML = collapseSidebarText;

    sidebarMedia.addListener(autoToggle);
    var toggler = function(e) {
      e.preventDefault();
      sidebarMedia.removeListener(autoToggle); // persist explicit off states
      toggleSidebar();
      return false;
    }
    toggle.addEventListener('click', toggler, false);


    /* Get <nav id=toc-nav>, or make it if we don’t have one. */
    var tocNav = document.getElementById('toc-nav');
    if (!tocNav) {
      tocNav = document.createElement('p');
      tocNav.id = 'toc-nav';
      /* Prepend for better keyboard navigation */
      document.body.insertBefore(tocNav, document.body.firstChild);
    }
    /* While we’re at it, make sure we have a Jump to Toc link. */
    var tocJump = document.getElementById('toc-jump');
    if (!tocJump) {
      tocJump = document.createElement('a');
      tocJump.id = 'toc-jump';
      tocJump.href = '#toc';
      tocJump.innerHTML = tocJumpText;
      tocNav.appendChild(tocJump);
    }

    tocNav.appendChild(toggle);
  }

  var toc = document.getElementById('toc');
  if (toc) {
    createSidebarToggle();
    toggleSidebar(sidebarMedia.matches);

    /* If the sidebar has been manually opened and is currently overlaying the text
       (window too small for the MQ to add the margin to body),
       then auto-close the sidebar once you click on something in there. */
    toc.addEventListener('click', function(e) {
      if(e.target.tagName.toLowerCase() == "a" && document.body.classList.contains('toc-sidebar') && !sidebarMedia.matches) {
        toggleSidebar(false);
      }
    }, false);
  }
  else {
    console.warn("Can’t find Table of Contents. Please use <nav id='toc'> around the ToC.");
  }

  /* Wrap tables in case they overflow */
  var tables = document.querySelectorAll(':not(.overlarge) > table.data, :not(.overlarge) > table.index');
  var numTables = tables.length;
  for (var i = 0; i < numTables; i++) {
    var table = tables[i];
    var wrapper = document.createElement('div');
    wrapper.className = 'overlarge';
    table.parentNode.insertBefore(wrapper, table);
    wrapper.appendChild(table);
  }

})();
</script>
  <h2 class="no-num no-ref heading settled" id="index"><span class="content">Index</span><a class="self-link" href="#index"></a></h2>
  <h3 class="no-num no-ref heading settled" id="index-defined-here"><span class="content">Terms defined by this specification</span><a class="self-link" href="#index-defined-here"></a></h3>
  <ul class="index">
   <li><a href="#distance-fraction">distance fraction</a><span>, in §2.3</span>
   <li><a href="#excluding-input">excluding input</a><span>, in §2.4</span>
   <li><a href="#dom-layoutshift-hadrecentinput">hadRecentInput</a><span>, in §4.1</span>
   <li><a href="#has-not-shifted">has not shifted</a><span>, in §2.2</span>
   <li><a href="#has-shifted">has shifted</a><span>, in §2.2</span>
   <li><a href="#impact-fraction">impact fraction</a><span>, in §2.3</span>
   <li><a href="#impact-region">impact region</a><span>, in §2.3</span>
   <li><a href="#in-the-previous-frame">in the previous frame</a><span>, in §2.1</span>
   <li><a href="#dom-layoutshift-lastinputtime">lastInputTime</a><span>, in §4.1</span>
   <li><a href="#layoutshift">LayoutShift</a><span>, in §3</span>
   <li><a href="#layout-shift-value">layout shift value</a><span>, in §2.3</span>
   <li><a href="#maximum-move-distance">maximum move distance</a><span>, in §2.3</span>
   <li><a href="#move-distance">move distance</a><span>, in §2.3</span>
   <li><a href="#move-vector">move vector</a><span>, in §2.3</span>
   <li><a href="#previous-frame-starting-point">previous frame starting point</a><span>, in §2.1</span>
   <li><a href="#previous-frame-visual-representation">previous frame visual representation</a><span>, in §2.1</span>
   <li><a href="#report-the-layout-shift">report the layout shift</a><span>, in §4.1</span>
   <li><a href="#starting-point">starting point</a><span>, in §2.1</span>
   <li><a href="#dom-layoutshift-tojson">toJSON()</a><span>, in §3</span>
   <li><a href="#unstable">unstable</a><span>, in §2.2</span>
   <li><a href="#unstable-node-set">unstable node set</a><span>, in §2.2</span>
   <li><a href="#dom-layoutshift-value">value</a><span>, in §4.1</span>
   <li><a href="#viewport-base-distance">viewport base distance</a><span>, in §2.3</span>
   <li><a href="#visual-representation">visual representation</a><span>, in §2.1</span>
  </ul>
  <aside class="dfn-panel" data-for="term-for-fragment">
   <a href="https://drafts.csswg.org/css-break-4/#fragment">https://drafts.csswg.org/css-break-4/#fragment</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-fragment">2.1. Basic Concepts</a> <a href="#ref-for-fragment①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-box">
   <a href="https://drafts.csswg.org/css-display-3/#box">https://drafts.csswg.org/css-display-3/#box</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-box">2.1. Basic Concepts</a> <a href="#ref-for-box①">(2)</a> <a href="#ref-for-box②">(3)</a>
    <li><a href="#ref-for-box③">2.2. Unstable Nodes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-containing-block-chain">
   <a href="https://drafts.csswg.org/css-display-3/#containing-block-chain">https://drafts.csswg.org/css-display-3/#containing-block-chain</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-containing-block-chain">2.2. Unstable Nodes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-principal-box">
   <a href="https://drafts.csswg.org/css-display-3/#principal-box">https://drafts.csswg.org/css-display-3/#principal-box</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-principal-box">2.1. Basic Concepts</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-text-nodes">
   <a href="https://drafts.csswg.org/css-display-3/#text-nodes">https://drafts.csswg.org/css-display-3/#text-nodes</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-text-nodes">2.1. Basic Concepts</a> <a href="#ref-for-text-nodes①">(2)</a>
    <li><a href="#ref-for-text-nodes②">2.2. Unstable Nodes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-scrollable-overflow-region">
   <a href="https://drafts.csswg.org/css-overflow-3/#scrollable-overflow-region">https://drafts.csswg.org/css-overflow-3/#scrollable-overflow-region</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-scrollable-overflow-region">2.2. Unstable Nodes</a> <a href="#ref-for-scrollable-overflow-region①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-line-breaking">
   <a href="https://www.w3.org/TR/css-text-3/#line-breaking">https://www.w3.org/TR/css-text-3/#line-breaking</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-line-breaking">2.1. Basic Concepts</a> <a href="#ref-for-line-breaking①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-local-coordinate-system">
   <a href="https://drafts.csswg.org/css-transforms-1/#local-coordinate-system">https://drafts.csswg.org/css-transforms-1/#local-coordinate-system</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-local-coordinate-system">2.2. Unstable Nodes</a> <a href="#ref-for-local-coordinate-system①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-pixel-unit">
   <a href="https://www.w3.org/TR/css-values-4/#pixel-unit">https://www.w3.org/TR/css-values-4/#pixel-unit</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-pixel-unit">2.1. Basic Concepts</a> <a href="#ref-for-pixel-unit①">(2)</a>
    <li><a href="#ref-for-pixel-unit②">2.2. Unstable Nodes</a>
    <li><a href="#ref-for-pixel-unit③">2.3. Layout Shift Value</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-flow-relative">
   <a href="https://drafts.csswg.org/css-writing-modes-4/#flow-relative">https://drafts.csswg.org/css-writing-modes-4/#flow-relative</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-flow-relative">2.1. Basic Concepts</a> <a href="#ref-for-flow-relative①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-containing-block-details">
   <a href="https://www.w3.org/TR/CSS2/visudet.html#containing-block-details">https://www.w3.org/TR/CSS2/visudet.html#containing-block-details</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-containing-block-details">2.2. Unstable Nodes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-viewport">
   <a href="https://www.w3.org/TR/cssom-view-1/#viewport">https://www.w3.org/TR/cssom-view-1/#viewport</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-viewport">2.1. Basic Concepts</a> <a href="#ref-for-viewport①">(2)</a> <a href="#ref-for-viewport②">(3)</a> <a href="#ref-for-viewport③">(4)</a>
    <li><a href="#ref-for-viewport④">2.2. Unstable Nodes</a>
    <li><a href="#ref-for-viewport⑤">2.3. Layout Shift Value</a> <a href="#ref-for-viewport⑥">(2)</a> <a href="#ref-for-viewport⑦">(3)</a>
    <li><a href="#ref-for-viewport⑧">2.4. Input Exclusion</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-document">
   <a href="https://dom.spec.whatwg.org/#document">https://dom.spec.whatwg.org/#document</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-document">2.2. Unstable Nodes</a>
    <li><a href="#ref-for-document①">2.3. Layout Shift Value</a> <a href="#ref-for-document②">(2)</a> <a href="#ref-for-document③">(3)</a> <a href="#ref-for-document④">(4)</a> <a href="#ref-for-document⑤">(5)</a>
    <li><a href="#ref-for-document⑥">4. Processing model</a> <a href="#ref-for-document⑦">(2)</a>
    <li><a href="#ref-for-document⑧">4.1. Report the layout shift</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-element">
   <a href="https://dom.spec.whatwg.org/#element">https://dom.spec.whatwg.org/#element</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-element">2.1. Basic Concepts</a> <a href="#ref-for-element①">(2)</a>
    <li><a href="#ref-for-element②">2.2. Unstable Nodes</a> <a href="#ref-for-element③">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-node">
   <a href="https://dom.spec.whatwg.org/#node">https://dom.spec.whatwg.org/#node</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-node">2.1. Basic Concepts</a> <a href="#ref-for-node①">(2)</a> <a href="#ref-for-node②">(3)</a> <a href="#ref-for-node③">(4)</a>
    <li><a href="#ref-for-node④">2.2. Unstable Nodes</a> <a href="#ref-for-node⑤">(2)</a>
    <li><a href="#ref-for-node⑥">2.3. Layout Shift Value</a> <a href="#ref-for-node⑦">(2)</a> <a href="#ref-for-node⑧">(3)</a> <a href="#ref-for-node⑨">(4)</a> <a href="#ref-for-node①⓪">(5)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-shadow-including-descendant">
   <a href="https://dom.spec.whatwg.org/#concept-shadow-including-descendant">https://dom.spec.whatwg.org/#concept-shadow-including-descendant</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-shadow-including-descendant">2.2. Unstable Nodes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-def-domhighrestimestamp">
   <a href="https://w3c.github.io/hr-time/#idl-def-domhighrestimestamp">https://w3c.github.io/hr-time/#idl-def-domhighrestimestamp</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-def-domhighrestimestamp">3. LayoutShift interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dfn-current-high-resolution-time">
   <a href="https://w3c.github.io/hr-time/#dfn-current-high-resolution-time">https://w3c.github.io/hr-time/#dfn-current-high-resolution-time</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dfn-current-high-resolution-time">4.1. Report the layout shift</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-event-loop-processing-model">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#event-loop-processing-model">https://html.spec.whatwg.org/multipage/webappapis.html#event-loop-processing-model</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-event-loop-processing-model">4. Processing model</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-update-the-rendering">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#update-the-rendering">https://html.spec.whatwg.org/multipage/webappapis.html#update-the-rendering</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-update-the-rendering">4. Processing model</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-mark-paint-timing">
   <a href="https://w3c.github.io/paint-timing/#mark-paint-timing">https://w3c.github.io/paint-timing/#mark-paint-timing</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-mark-paint-timing">4. Processing model</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-the-performanceentry-interface">
   <a href="https://w3c.github.io/performance-timeline/#the-performanceentry-interface">https://w3c.github.io/performance-timeline/#the-performanceentry-interface</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-the-performanceentry-interface">3. LayoutShift interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dom-performanceentry-duration">
   <a href="https://w3c.github.io/performance-timeline/#dom-performanceentry-duration">https://w3c.github.io/performance-timeline/#dom-performanceentry-duration</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-performanceentry-duration">4.1. Report the layout shift</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dom-performanceentry-entrytype">
   <a href="https://w3c.github.io/performance-timeline/#dom-performanceentry-entrytype">https://w3c.github.io/performance-timeline/#dom-performanceentry-entrytype</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-performanceentry-entrytype">4.1. Report the layout shift</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dom-performanceentry-name">
   <a href="https://w3c.github.io/performance-timeline/#dom-performanceentry-name">https://w3c.github.io/performance-timeline/#dom-performanceentry-name</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-performanceentry-name">4.1. Report the layout shift</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dom-performanceentry-starttime">
   <a href="https://w3c.github.io/performance-timeline/#dom-performanceentry-starttime">https://w3c.github.io/performance-timeline/#dom-performanceentry-starttime</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-performanceentry-starttime">4.1. Report the layout shift</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-supportedentrytypes-attribute">
   <a href="https://w3c.github.io/performance-timeline/#supportedentrytypes-attribute">https://w3c.github.io/performance-timeline/#supportedentrytypes-attribute</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-supportedentrytypes-attribute">3. LayoutShift interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-sec-privacy-security">
   <a href="https://w3c.github.io/resource-timing/#sec-privacy-security">https://w3c.github.io/resource-timing/#sec-privacy-security</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-sec-privacy-security">5. Security &amp; privacy considerations</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dom-visualviewport-height">
   <a href="https://wicg.github.io/visual-viewport/index.html#dom-visualviewport-height">https://wicg.github.io/visual-viewport/index.html#dom-visualviewport-height</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-visualviewport-height">2.3. Layout Shift Value</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dom-visualviewport-width">
   <a href="https://wicg.github.io/visual-viewport/index.html#dom-visualviewport-width">https://wicg.github.io/visual-viewport/index.html#dom-visualviewport-width</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-visualviewport-width">2.3. Layout Shift Value</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-Default">
   <a href="https://heycam.github.io/webidl/#Default">https://heycam.github.io/webidl/#Default</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-Default">3. LayoutShift interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-Exposed">
   <a href="https://heycam.github.io/webidl/#Exposed">https://heycam.github.io/webidl/#Exposed</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-Exposed">3. LayoutShift interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-boolean">
   <a href="https://heycam.github.io/webidl/#idl-boolean">https://heycam.github.io/webidl/#idl-boolean</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-boolean">3. LayoutShift interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-long">
   <a href="https://heycam.github.io/webidl/#idl-long">https://heycam.github.io/webidl/#idl-long</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-long">3. LayoutShift interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-object">
   <a href="https://heycam.github.io/webidl/#idl-object">https://heycam.github.io/webidl/#idl-object</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-object">3. LayoutShift interface</a>
   </ul>
  </aside>
  <h3 class="no-num no-ref heading settled" id="index-defined-elsewhere"><span class="content">Terms defined by reference</span><a class="self-link" href="#index-defined-elsewhere"></a></h3>
  <ul class="index">
   <li>
    <a data-link-type="biblio">[css-break-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-fragment" style="color:initial">fragment</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-display-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-box" style="color:initial">box</span>
     <li><span class="dfn-paneled" id="term-for-containing-block-chain" style="color:initial">containing block chain</span>
     <li><span class="dfn-paneled" id="term-for-principal-box" style="color:initial">principal box</span>
     <li><span class="dfn-paneled" id="term-for-text-nodes" style="color:initial">text node</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-overflow-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-scrollable-overflow-region" style="color:initial">scrollable overflow region</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-text-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-line-breaking" style="color:initial">line box</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-transforms-1]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-local-coordinate-system" style="color:initial">local coordinate system</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-values-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-pixel-unit" style="color:initial">pixel units</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-writing-modes-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-flow-relative" style="color:initial">flow-relative</span>
    </ul>
   <li>
    <a data-link-type="biblio">[CSS2]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-containing-block-details" style="color:initial">initial containing block</span>
    </ul>
   <li>
    <a data-link-type="biblio">[cssom-view-1]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-viewport" style="color:initial">viewport</span>
    </ul>
   <li>
    <a data-link-type="biblio">[DOM]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-document" style="color:initial">Document</span>
     <li><span class="dfn-paneled" id="term-for-element" style="color:initial">Element</span>
     <li><span class="dfn-paneled" id="term-for-node" style="color:initial">Node</span>
     <li><span class="dfn-paneled" id="term-for-concept-shadow-including-descendant" style="color:initial">shadow-including descendants</span>
    </ul>
   <li>
    <a data-link-type="biblio">[hr-time-2]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-idl-def-domhighrestimestamp" style="color:initial">DOMHighResTimeStamp</span>
     <li><span class="dfn-paneled" id="term-for-dfn-current-high-resolution-time" style="color:initial">current high resolution time</span>
    </ul>
   <li>
    <a data-link-type="biblio">[HTML]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-event-loop-processing-model" style="color:initial">event loop processing model</span>
     <li><span class="dfn-paneled" id="term-for-update-the-rendering" style="color:initial">update the rendering</span>
    </ul>
   <li>
    <a data-link-type="biblio">[paint-timing]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-mark-paint-timing" style="color:initial">mark paint timing</span>
    </ul>
   <li>
    <a data-link-type="biblio">[performance-timeline-2]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-the-performanceentry-interface" style="color:initial">PerformanceEntry</span>
     <li><span class="dfn-paneled" id="term-for-dom-performanceentry-duration" style="color:initial">duration</span>
     <li><span class="dfn-paneled" id="term-for-dom-performanceentry-entrytype" style="color:initial">entryType</span>
     <li><span class="dfn-paneled" id="term-for-dom-performanceentry-name" style="color:initial">name</span>
     <li><span class="dfn-paneled" id="term-for-dom-performanceentry-starttime" style="color:initial">startTime</span>
     <li><span class="dfn-paneled" id="term-for-supportedentrytypes-attribute" style="color:initial">supportedEntryTypes</span>
    </ul>
   <li>
    <a data-link-type="biblio">[resource-timing-1]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-sec-privacy-security" style="color:initial">statistical fingerprinting</span>
    </ul>
   <li>
    <a data-link-type="biblio">[VISUAL-VIEWPORT]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-dom-visualviewport-height" style="color:initial">visual viewport height</span>
     <li><span class="dfn-paneled" id="term-for-dom-visualviewport-width" style="color:initial">visual viewport width</span>
    </ul>
   <li>
    <a data-link-type="biblio">[WebIDL]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-Default" style="color:initial">Default</span>
     <li><span class="dfn-paneled" id="term-for-Exposed" style="color:initial">Exposed</span>
     <li><span class="dfn-paneled" id="term-for-idl-boolean" style="color:initial">boolean</span>
     <li><span class="dfn-paneled" id="term-for-idl-long" style="color:initial">long</span>
     <li><span class="dfn-paneled" id="term-for-idl-object" style="color:initial">object</span>
    </ul>
  </ul>
  <h2 class="no-num no-ref heading settled" id="references"><span class="content">References</span><a class="self-link" href="#references"></a></h2>
  <h3 class="no-num no-ref heading settled" id="normative"><span class="content">Normative References</span><a class="self-link" href="#normative"></a></h3>
  <dl>
   <dt id="biblio-css-break-4">[CSS-BREAK-4]
   <dd>Rossen Atanassov; Elika Etemad. <a href="https://www.w3.org/TR/css-break-4/">CSS Fragmentation Module Level 4</a>. 18 December 2018. WD. URL: <a href="https://www.w3.org/TR/css-break-4/">https://www.w3.org/TR/css-break-4/</a>
   <dt id="biblio-css-display-3">[CSS-DISPLAY-3]
   <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://www.w3.org/TR/css-display-3/">CSS Display Module Level 3</a>. 28 August 2018. CR. URL: <a href="https://www.w3.org/TR/css-display-3/">https://www.w3.org/TR/css-display-3/</a>
   <dt id="biblio-css-overflow-3">[CSS-OVERFLOW-3]
   <dd>David Baron; Elika Etemad; Florian Rivoal. <a href="https://www.w3.org/TR/css-overflow-3/">CSS Overflow Module Level 3</a>. 31 July 2018. WD. URL: <a href="https://www.w3.org/TR/css-overflow-3/">https://www.w3.org/TR/css-overflow-3/</a>
   <dt id="biblio-css-text-3">[CSS-TEXT-3]
   <dd>Elika Etemad; Koji Ishii; Florian Rivoal. <a href="https://www.w3.org/TR/css-text-3/">CSS Text Module Level 3</a>. 12 December 2018. WD. URL: <a href="https://www.w3.org/TR/css-text-3/">https://www.w3.org/TR/css-text-3/</a>
   <dt id="biblio-css-transforms-1">[CSS-TRANSFORMS-1]
   <dd>Simon Fraser; et al. <a href="https://www.w3.org/TR/css-transforms-1/">CSS Transforms Module Level 1</a>. 14 February 2019. CR. URL: <a href="https://www.w3.org/TR/css-transforms-1/">https://www.w3.org/TR/css-transforms-1/</a>
   <dt id="biblio-css-values-4">[CSS-VALUES-4]
   <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://www.w3.org/TR/css-values-4/">CSS Values and Units Module Level 4</a>. 31 January 2019. WD. URL: <a href="https://www.w3.org/TR/css-values-4/">https://www.w3.org/TR/css-values-4/</a>
   <dt id="biblio-css-writing-modes-4">[CSS-WRITING-MODES-4]
   <dd>Elika Etemad; Koji Ishii. <a href="https://www.w3.org/TR/css-writing-modes-4/">CSS Writing Modes Level 4</a>. 24 May 2018. CR. URL: <a href="https://www.w3.org/TR/css-writing-modes-4/">https://www.w3.org/TR/css-writing-modes-4/</a>
   <dt id="biblio-css2">[CSS2]
   <dd>Bert Bos; et al. <a href="https://www.w3.org/TR/CSS2/">Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification</a>. 7 June 2011. REC. URL: <a href="https://www.w3.org/TR/CSS2/">https://www.w3.org/TR/CSS2/</a>
   <dt id="biblio-cssom-view-1">[CSSOM-VIEW-1]
   <dd>Simon Pieters. <a href="https://www.w3.org/TR/cssom-view-1/">CSSOM View Module</a>. 17 March 2016. WD. URL: <a href="https://www.w3.org/TR/cssom-view-1/">https://www.w3.org/TR/cssom-view-1/</a>
   <dt id="biblio-dom">[DOM]
   <dd>Anne van Kesteren. <a href="https://dom.spec.whatwg.org/">DOM Standard</a>. Living Standard. URL: <a href="https://dom.spec.whatwg.org/">https://dom.spec.whatwg.org/</a>
   <dt id="biblio-hr-time-2">[HR-TIME-2]
   <dd>Ilya Grigorik; James Simonsen; Jatinder Mann. <a href="https://www.w3.org/TR/hr-time-2/">High Resolution Time Level 2</a>. 1 March 2018. CR. URL: <a href="https://www.w3.org/TR/hr-time-2/">https://www.w3.org/TR/hr-time-2/</a>
   <dt id="biblio-html">[HTML]
   <dd>Anne van Kesteren; et al. <a href="https://html.spec.whatwg.org/multipage/">HTML Standard</a>. Living Standard. URL: <a href="https://html.spec.whatwg.org/multipage/">https://html.spec.whatwg.org/multipage/</a>
   <dt id="biblio-paint-timing">[PAINT-TIMING]
   <dd>Shubhie Panicker. <a href="https://www.w3.org/TR/paint-timing/">Paint Timing 1</a>. 7 September 2017. WD. URL: <a href="https://www.w3.org/TR/paint-timing/">https://www.w3.org/TR/paint-timing/</a>
   <dt id="biblio-performance-timeline-2">[PERFORMANCE-TIMELINE-2]
   <dd>Ilya Grigorik. <a href="https://www.w3.org/TR/performance-timeline-2/">Performance Timeline Level 2</a>. 23 April 2019. WD. URL: <a href="https://www.w3.org/TR/performance-timeline-2/">https://www.w3.org/TR/performance-timeline-2/</a>
   <dt id="biblio-resource-timing-1">[RESOURCE-TIMING-1]
   <dd>Arvind Jain; et al. <a href="https://www.w3.org/TR/resource-timing-1/">Resource Timing Level 1</a>. 30 March 2017. CR. URL: <a href="https://www.w3.org/TR/resource-timing-1/">https://www.w3.org/TR/resource-timing-1/</a>
   <dt id="biblio-rfc2119">[RFC2119]
   <dd>S. Bradner. <a href="https://tools.ietf.org/html/rfc2119">Key words for use in RFCs to Indicate Requirement Levels</a>. March 1997. Best Current Practice. URL: <a href="https://tools.ietf.org/html/rfc2119">https://tools.ietf.org/html/rfc2119</a>
   <dt id="biblio-visual-viewport">[VISUAL-VIEWPORT]
   <dd><a href="https://wicg.github.io/visual-viewport/">Visual Viewport API</a>. Living Standard. URL: <a href="https://wicg.github.io/visual-viewport/">https://wicg.github.io/visual-viewport/</a>
   <dt id="biblio-webidl">[WebIDL]
   <dd>Boris Zbarsky. <a href="https://heycam.github.io/webidl/">Web IDL</a>. 15 December 2016. ED. URL: <a href="https://heycam.github.io/webidl/">https://heycam.github.io/webidl/</a>
  </dl>
  <h2 class="no-num no-ref heading settled" id="idl-index"><span class="content">IDL Index</span><a class="self-link" href="#idl-index"></a></h2>
<pre class="idl highlight def">[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed①"><c- g>Exposed</c-></a>=<c- n>Window</c->]
<c- b>interface</c-> <a href="#layoutshift"><code class="highlight"><c- g>LayoutShift</c-></code></a> : <a class="n" data-link-type="idl-name" href="https://w3c.github.io/performance-timeline/#the-performanceentry-interface" id="ref-for-the-performanceentry-interface①"><c- n>PerformanceEntry</c-></a> {
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-long" id="ref-for-idl-long①"><c- b>long</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="long" href="#dom-layoutshift-value" id="ref-for-dom-layoutshift-value①"><c- g>value</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-boolean" id="ref-for-idl-boolean①"><c- b>boolean</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="boolean" href="#dom-layoutshift-hadrecentinput" id="ref-for-dom-layoutshift-hadrecentinput①"><c- g>hadRecentInput</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://w3c.github.io/hr-time/#idl-def-domhighrestimestamp" id="ref-for-idl-def-domhighrestimestamp①"><c- n>DOMHighResTimeStamp</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="DOMHighResTimeStamp" href="#dom-layoutshift-lastinputtime" id="ref-for-dom-layoutshift-lastinputtime②"><c- g>lastInputTime</c-></a>;
  [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Default" id="ref-for-Default①"><c- g>Default</c-></a>] <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-object" id="ref-for-idl-object①"><c- b>object</c-></a> <a href="#dom-layoutshift-tojson"><code class="highlight"><c- g>toJSON</c-></code></a>();
};

</pre>
  <aside class="dfn-panel" data-for="starting-point">
   <b><a href="#starting-point">#starting-point</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-starting-point">2.1. Basic Concepts</a>
    <li><a href="#ref-for-starting-point①">2.2. Unstable Nodes</a>
    <li><a href="#ref-for-starting-point②">2.3. Layout Shift Value</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="visual-representation">
   <b><a href="#visual-representation">#visual-representation</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-visual-representation">2.1. Basic Concepts</a>
    <li><a href="#ref-for-visual-representation①">2.3. Layout Shift Value</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="in-the-previous-frame">
   <b><a href="#in-the-previous-frame">#in-the-previous-frame</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-in-the-previous-frame">2.1. Basic Concepts</a> <a href="#ref-for-in-the-previous-frame①">(2)</a>
    <li><a href="#ref-for-in-the-previous-frame②">2.2. Unstable Nodes</a> <a href="#ref-for-in-the-previous-frame③">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="previous-frame-starting-point">
   <b><a href="#previous-frame-starting-point">#previous-frame-starting-point</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-previous-frame-starting-point">2.2. Unstable Nodes</a>
    <li><a href="#ref-for-previous-frame-starting-point①">2.3. Layout Shift Value</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="previous-frame-visual-representation">
   <b><a href="#previous-frame-visual-representation">#previous-frame-visual-representation</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-previous-frame-visual-representation">2.3. Layout Shift Value</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="has-shifted">
   <b><a href="#has-shifted">#has-shifted</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-has-shifted">2.2. Unstable Nodes</a> <a href="#ref-for-has-shifted①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="has-not-shifted">
   <b><a href="#has-not-shifted">#has-not-shifted</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-has-not-shifted">2.2. Unstable Nodes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="unstable">
   <b><a href="#unstable">#unstable</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-unstable">2.2. Unstable Nodes</a> <a href="#ref-for-unstable①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="unstable-node-set">
   <b><a href="#unstable-node-set">#unstable-node-set</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-unstable-node-set">2.3. Layout Shift Value</a> <a href="#ref-for-unstable-node-set①">(2)</a> <a href="#ref-for-unstable-node-set②">(3)</a> <a href="#ref-for-unstable-node-set③">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="viewport-base-distance">
   <b><a href="#viewport-base-distance">#viewport-base-distance</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-viewport-base-distance">2.3. Layout Shift Value</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="move-vector">
   <b><a href="#move-vector">#move-vector</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-move-vector">2.3. Layout Shift Value</a> <a href="#ref-for-move-vector①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="move-distance">
   <b><a href="#move-distance">#move-distance</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-move-distance">2.3. Layout Shift Value</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="maximum-move-distance">
   <b><a href="#maximum-move-distance">#maximum-move-distance</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-maximum-move-distance">2.3. Layout Shift Value</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="distance-fraction">
   <b><a href="#distance-fraction">#distance-fraction</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-distance-fraction">2.3. Layout Shift Value</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="impact-region">
   <b><a href="#impact-region">#impact-region</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-impact-region">2.3. Layout Shift Value</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="impact-fraction">
   <b><a href="#impact-fraction">#impact-fraction</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-impact-fraction">2.3. Layout Shift Value</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="layout-shift-value">
   <b><a href="#layout-shift-value">#layout-shift-value</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-layout-shift-value">4.1. Report the layout shift</a> <a href="#ref-for-layout-shift-value①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="excluding-input">
   <b><a href="#excluding-input">#excluding-input</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-excluding-input">4.1. Report the layout shift</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="layoutshift">
   <b><a href="#layoutshift">#layoutshift</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-layoutshift">3. LayoutShift interface</a>
    <li><a href="#ref-for-layoutshift①">4.1. Report the layout shift</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="report-the-layout-shift">
   <b><a href="#report-the-layout-shift">#report-the-layout-shift</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-report-the-layout-shift">2.1. Basic Concepts</a>
    <li><a href="#ref-for-report-the-layout-shift①">3. LayoutShift interface</a>
    <li><a href="#ref-for-report-the-layout-shift②">4. Processing model</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-layoutshift-value">
   <b><a href="#dom-layoutshift-value">#dom-layoutshift-value</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-layoutshift-value">3. LayoutShift interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-layoutshift-lastinputtime">
   <b><a href="#dom-layoutshift-lastinputtime">#dom-layoutshift-lastinputtime</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-layoutshift-lastinputtime">3. LayoutShift interface</a>
    <li><a href="#ref-for-dom-layoutshift-lastinputtime①">4.1. Report the layout shift</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-layoutshift-hadrecentinput">
   <b><a href="#dom-layoutshift-hadrecentinput">#dom-layoutshift-hadrecentinput</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-layoutshift-hadrecentinput">3. LayoutShift interface</a>
   </ul>
  </aside>
<script>/* script-var-click-highlighting */

    document.addEventListener("click", e=>{
        if(e.target.nodeName == "VAR") {
            highlightSameAlgoVars(e.target);
        }
    });
    {
        const indexCounts = new Map();
        const indexNames = new Map();
        function highlightSameAlgoVars(v) {
            // Find the algorithm container.
            let algoContainer = null;
            let searchEl = v;
            while(algoContainer == null && searchEl != document.body) {
                searchEl = searchEl.parentNode;
                if(searchEl.hasAttribute("data-algorithm")) {
                    algoContainer = searchEl;
                }
            }

            // Not highlighting document-global vars,
            // too likely to be unrelated.
            if(algoContainer == null) return;

            const algoName = algoContainer.getAttribute("data-algorithm");
            const varName = getVarName(v);
            const addClass = !v.classList.contains("selected");
            let highlightClass = null;
            if(addClass) {
                const index = chooseHighlightIndex(algoName, varName);
                indexCounts.get(algoName)[index] += 1;
                indexNames.set(algoName+"///"+varName, index);
                highlightClass = nameFromIndex(index);
            } else {
                const index = previousHighlightIndex(algoName, varName);
                indexCounts.get(algoName)[index] -= 1;
                highlightClass = nameFromIndex(index);
            }

            // Find all same-name vars, and toggle their class appropriately.
            for(const el of algoContainer.querySelectorAll("var")) {
                if(getVarName(el) == varName) {
                    el.classList.toggle("selected", addClass);
                    el.classList.toggle(highlightClass, addClass);
                }
            }
        }
        function getVarName(el) {
            return el.textContent.replace(/(\s| )+/, " ").trim();
        }
        function chooseHighlightIndex(algoName, varName) {
            let indexes = null;
            if(indexCounts.has(algoName)) {
                indexes = indexCounts.get(algoName);
            } else {
                // 7 classes right now
                indexes = [0,0,0,0,0,0,0];
                indexCounts.set(algoName, indexes);
            }

            // If the element was recently unclicked,
            // *and* that color is still unclaimed,
            // give it back the same color.
            const lastIndex = previousHighlightIndex(algoName, varName);
            if(indexes[lastIndex] === 0) return lastIndex;

            // Find the earliest index with the lowest count.
            const minCount = Math.min.apply(null, indexes);
            let index = null;
            for(var i = 0; i < indexes.length; i++) {
                if(indexes[i] == minCount) {
                    return i;
                }
            }
        }
        function previousHighlightIndex(algoName, varName) {
            return indexNames.get(algoName+"///"+varName);
        }
        function nameFromIndex(index) {
            return "selected" + index;
        }
    }
    </script>
<script>/* script-dfn-panel */

document.body.addEventListener("click", function(e) {
    var queryAll = function(sel) { return [].slice.call(document.querySelectorAll(sel)); }
    // Find the dfn element or panel, if any, that was clicked on.
    var el = e.target;
    var target;
    var hitALink = false;
    while(el.parentElement) {
        if(el.tagName == "A") {
            // Clicking on a link in a <dfn> shouldn't summon the panel
            hitALink = true;
        }
        if(el.classList.contains("dfn-paneled")) {
            target = "dfn";
            break;
        }
        if(el.classList.contains("dfn-panel")) {
            target = "dfn-panel";
            break;
        }
        el = el.parentElement;
    }
    if(target != "dfn-panel") {
        // Turn off any currently "on" or "activated" panels.
        queryAll(".dfn-panel.on, .dfn-panel.activated").forEach(function(el){
            el.classList.remove("on");
            el.classList.remove("activated");
        });
    }
    if(target == "dfn" && !hitALink) {
        // open the panel
        var dfnPanel = document.querySelector(".dfn-panel[data-for='" + el.id + "']");
        if(dfnPanel) {
            dfnPanel.classList.add("on");
            var rect = el.getBoundingClientRect();
            dfnPanel.style.left = window.scrollX + rect.right + 5 + "px";
            dfnPanel.style.top = window.scrollY + rect.top + "px";
            var panelRect = dfnPanel.getBoundingClientRect();
            var panelWidth = panelRect.right - panelRect.left;
            if(panelRect.right > document.body.scrollWidth && (rect.left - (panelWidth + 5)) > 0) {
                // Reposition, because the panel is overflowing
                dfnPanel.style.left = window.scrollX + rect.left - (panelWidth + 5) + "px";
            }
        } else {
            console.log("Couldn't find .dfn-panel[data-for='" + el.id + "']");
        }
    } else if(target == "dfn-panel") {
        // Switch it to "activated" state, which pins it.
        el.classList.add("activated");
        el.style.left = null;
        el.style.top = null;
    }

});
</script>